Web存储、通信、地理位置 Web存储、通信、地理位置

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.通过内联框架

3.websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
使用websocket可以在服务器与客户端之间建立一个非HTTP的双向连接，这个连接是实时的也是永久的，除非被显示关闭。服务器可以随时将消息推送到客户端。

【Web存储、通信、地理位置】

文章图片

要想实现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); })