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 }) //获取cookieconsole.log(Cookie.get('name'));//移除cookieCookies.remove('name')只针对于服务器,同一个服务器能够共享cookie。存储大量数据，面向服务器的 4kb2.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是共享的，最大4kbWebStorage 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实时的，长连贯geolocationH5中增加了获取地理位置的api, window.navigator.geolocation.getCurrentPosition。它也是百度地图/高德地图通过浏览器定位的实现原理。window.navigator.geolocation.getCurrentPosition(position=>{ console.log(position);})