乐趣区

关于前端:Web存储通信地理位置

jiezi

Web 存储、通信、地理位置

1.Web 存储

cookie 存储在浏览器中，每次浏览器向服务器发送申请都须要携带 cookie，个别状况下，cookie 是产生于服务器端，保留于客户端，然而咱们也能够通过 js 来产生 cookie；通常通过 js-cookie 这个库来操作 cookie

1.Cookie // 创立一个 cookie,7 天后过期
Cookies.set("name","this is a test cookie",{ expires: 7}) 
// 获取 cookie
console.log(Cookie.get('name'));
// 移除 cookie
Cookies.remove('name')
 只针对于服务器, 同一个服务器能够共享 cookie。存储大量数据，面向服务器的 4kb
2.WebStorage
    sessionStorage 会话存储 选项卡
    localStorage 本地存储 存到本地磁盘中，即便浏览器敞开数据仍然在。//1. sessionStorage 会话存储特点
    页面会话在浏览器关上期间始终放弃，并且从新加载或复原页面仍会放弃原来的页面会话。关上多个雷同的 URL 的 Tabs 页面，会创立各自的 sessionStorage。敞开对应浏览器 tab，会革除对应的 sessionStorage。sessionStorage 实例办法
            // 设置内容
        sessionStorage.setItem('name','terry');
        // 获取内容
        console.log(sessionStorage.getItem('name'));
        // 清空内容的属性值
        // sessionStorage.clear();
        // 清空内容
        sessionStorage.removeItem('name')    
//2. localStorage 本地存储 存到本地磁盘中，即便浏览器敞开数据仍然在。// 设置内容
        localStorage.setItem('name','larry');
        // 获取内容
        console.log(localStorage.getItem('name'));
        // 清空内容
        localStorage.clear()
        // 清空内容
        // localStorage.removeItem('name')
Web 存储
Cookie  存储大量数据，面向服务器的，同一个服务器的 cookie 是共享的，最大 4kb
WebStorage 
  sessionStorage 会话存储，选项卡 选项卡敞开, 会话生效  -- 写我的项目举荐应用
  localStorage 本地存储，存到本地磁盘中，即便浏览器敞开数据仍然在。

2. 通信

跨文档音讯传输

H5 提供了网页文档之间相互接管与发送音讯的性能。当在 a 页面中通过 window.open 办法关上 b 页面，或者在 a 页面中通过 iframe 嵌套 b 页面，咱们想让 a 中的数据传递到 b 中就能够应用跨文档音讯传输 

 跨文档信息传输
1. 通过 window.open 关上 b 页面
A1 页面关上新窗口
 window.onload=function(){
            // 获取 button 按钮
            var btn=document.querySelector('button');
            // 获取发送数据按钮
            var sendBtn=document.querySelector('#send');
            // 点击 btn 关上一个新窗口
            var win; 
            btn.onclick=function(){win=window.open('./B1.html')
            }
            // 点击 send 按钮 发送音讯给 B1 窗口
            sendBtn.onclick=function(){win.postMessage('hello','http://127.0.0.1:5500')
            }
  }
  B1 页面承受传递过去的音讯
  window.onmessage=function(event){
            // 接管到的数据
            console.log(e.data);
            // 数据的起源
            console.log(e.origin)
  }
2. 通过内联框架
  <script>
    window.onload = function () {var btn = document.querySelector('button');
      var sendBtn = document.querySelector('#send');
      var iframeBtn = document.querySelector('#iframe');
      var win;
      btn.onclick = function () {
        // 关上新页面
        win = window.open('./B1.html');
        //win.postMessage('hello', '*');
        console.log(win);
      }
      sendBtn.onclick = function () {
        // 发送音讯
        // win.postMessage('hello', '*');
        var obj = {name: 'zhangsan', age: 12};
        win.postMessage(obj, 'http://127.0.0.1:5500');
        // win.postMessage('hello', 'http://127.0.0.1:5500');
        // win.postMessage('hello');
      }

      iframeBtn.onclick = function () {
        // 获取 b1 内联窗口，应用窗口发送数据
        win = document.querySelector('iframe').contentWindow;
      }

    }
  </script>
<body>
  <button> 关上 B1 页面 ( 获取 B1 窗口）</button>
  <button id="send"> 发送数据 </button>
  <button id="iframe"> 给内联框架发送音讯（获取内联 B1 窗口）</button>
  <!-- 内联窗口  -->
  <iframe src="./B1.html" frameborder="0"></iframe>
</body>

3.websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连贯上进行全双工通信的协定。

WebSocket 使得客户端和服务器之间的数据交换变得更加简略，容许服务端被动向客户端推送数据。

应用 websocket 能够在服务器与客户端之间建设一个非 HTTP 的双向连贯，这个连贯是实时的也是永恒的，除非被显示敞开。服务器能够随时将音讯推送到客户端。

 要想实现 websocket 连贯，须要有服务器的反对。// WebSocket 对象
 var socket=new WebSocket('ws://47.93.206.13:7788/imserver/1');
        // 承受推送音讯事件监听
 socket.onmessage=function(event){
            // event.data 就是推送的数据
            console.log(event.data)
        }
        // websocket 和服务器连贯胜利的监听
 socket.onopen=function(){console.log('websocket 和服务器连贯胜利的监听');
            socket.send('这是浏览器给服务器端的数据')
        }
         // websocket 和服务器连贯敞开连贯的监听
  socket.close=function(){console.log('websocket 和服务器连贯敞开')
         }
 setTimeout(socket.close,5000)
 订单
  物流
  想晓得物流到哪里了

  发送申请，获取响应

  能够应用轮询，间歇调用内执行申请
  setInterval(function(){
    ajax->
    if(res.address){告诉用户}
  },1000)

  推送，工作实现后服务器推送一下，浏览器只承受，websocket 实时的，长连贯 
geolocation
H5 中增加了获取地理位置的 api, window.navigator.geolocation.getCurrentPosition。它也是百度地图 / 高德地图通过浏览器定位的实现原理。window.navigator.geolocation.getCurrentPosition(position=>{console.log(position);
})
退出移动版