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的双向连接,这个连接是实时的也是永久的,除非被显示关闭。服务器可以随时将消息推送到客户端。

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

你可能感兴趣的:(Web存储、通信、地理位置)