Web存储，通信总结

Web存储，通信，这些底层的原理，不仅在面试中会有提问，当然在项目中也会涉及到，很重要

第一：Web存储

1.1 Cookie

1.  cookies 是基于http规范，用来识别用户，产生于服务器，保存于客户端，当然Cookie是服务器发送到浏览器的一小段数据，会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上(这里之后的应用就是用户在浏览器访问某些东西，查找一些内容，都会生成一些cookie数据，当然这是我了解到的，因为之前在访问个人博客地址时候，访问不到，可能是访问的太多次数了，需要清除一下之前访问所产生的cookie)
2.  当然Cookie诞生之初是解决http的无状态请求的作用，用来记录一些用户相关的一些状态 如：会话登录状态等等
3.  现在呢因为一些前端交互的需要，cookie用于存储一些客户端的数据 ，今天的小的项目就是利用到这个
4. Cookie是紧跟域名的，同一个域名下的所有请求，都会携带cookie，Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储，那么原理是什么呢，一张图就可以很清晰的知道，如图 :

// name 为属性值 ，expries 为期限

var cookie = Cookies.set('name','this is cooke',{ expries: 7})

Cookies.set(‘name’,’this is cookies’); //设置cookie

Cookies.get(‘name’); //获取

Cookies.remove(‘name’) //移除

1. 当然cookie有很多缺陷和诸多的不安全性，这个现阶段只做了解，不去深入研究，因为大多数浏览器只是让cookie做他该做的事情，而不是过多的去使用cookie，取而代之的是相对没有那么多局限的Web Storage，那么这个专业的团队就出来了

1.2 Web Storage

这个专业的团队呢，是做本地存储的一种方式，分为sessionStorage和localStorage，有了这俩种方式，cookie呢：作为客户端与服务器交互的通道，保持客户端状态，具体呢这里我还是不太了解，需要后续去进一步的学习，因为一些底层的原理，因为时间的原因，记不太清了，那么这俩种本地存储的方式，到底是什么呢，首先了解一下各自的特点

LocalStorage：保存的数据长期存在，下一次访问的时候，直接读取保存的数据，就像是有了记忆一样，仅在客户端使用不在服务器端进行通信，localStorage保存的数据以键值对的形式保存，例如：name 对应一个值 小明 有俩个方法setItem和getItem

localStorage.setItem("key","value");

例如：

localStorage.setItem(‘name’,’xiaogepao’); //存入数据方法，我们一般来说设置

localStorage.getItem(‘name/其他’); //读取数据的方法 只有一个参数，键值

localStorage.removeItem(‘name’); //移除属性，name属性就不存在了

这里再提一点：生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果想设置失效时间，需自行封装

sessionStorage：字面意思来理解就是会话存储，会话当然是一次而有一次，这次会话结束了，才会开始下一次会话，显而易见，生命周期只有一段时间，就是在浏览器关闭前，当随着浏览器关闭也就失效了，这里也是仅在客户端使用，不在服务器段进行通信。当然方法和属性和localStorage是完全一样的

sessionStorage.setItem(‘name’,’小明’);

sessionStorage.getItem(‘name’);

sessionStorage.removeItem(‘name’);

sessionStorage.clear(); //这里是清空存储的键值，属性名保留

当然这三个存储方式有区别有共同点：

共同点：都是保存在浏览器端，且都遵循同源策略。

不同点：在于生命周期与作用域的不同（这里只做了解不做深层次的研究）

这篇文章里有详细的说明：https://www.sohu.com/a/305569451_115128

第二：通信

2.1跨文档消息传输

有时候也称之为XDM，指的是来自不同域的页面进行相互间的传递消息，核心当然是postMessage()方法，那么另一个就是在页面内嵌套iframe元素，由当前页面弹出的窗口

当然postMessage()方法接收两个参数：一条消息和一个表示消息接收方来自哪个域的字符串。第二个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方，这些在最新的html5规范里都有，不做过多解释，如：

A页面

在浏览器上打开新的页面：window.open(‘/B.html’);

发送相关的数据：winpostMessage(‘hello’);

通过iframe内嵌套B页面：

win = document.querySelector(‘iframe’).contentWindow;

B页面

接收A页面传过来的数据

Window.onmessage = function(event){

Console.log(event.data); //传递的数据

Console.log(event.origin); //源路径 }

2.2 websocket

websocket是html5规范的一部分，大致呢也是通信机制的一种，都知道有了htpp这一种协议，也知道http有三次握手原则(这里简单提一下)，那么websocket也是一种协议，那有了一种协议为什么还要有另一种协议呢，我们猜想，肯定是http协议有所缺陷，对http协议的改进，就像是电脑的cpu一样，有了i7就会有i8，更新换代嘛，因为http协议的缺点只能是通信由客户端发起，我想这里的缺点也应该是它的优点吧，来举个栗子：

我们想要查询今天的天气，只能是在客户端发送查询请求之后，服务器返回要查询的结果，而http协议做不到服务器主动向客户端推送。

那么知道这个以后，服务器端会主动向客户端推送消息，实现了双向平等，而不是只可以客户端向服务器端发送，当然websocket不能脱离http协议单独存在，需要http的配合，我想这样是它的缺点吧。

那么如何去实现呢：简单的几步

//1.先实例化ws实例

Const ws = new WebSocket(‘ws:localhost:8000’);

//2.监听ws连接节点

Ws.addEventListener(‘open’,openHandler);

Ws.addEventListener(‘close’,closeHandler);

Ws.addEventListener(‘error’,errorHandler);

Ws.addEventListener(‘message’,messageHandler);

//3.发送数据，响应数据

Function openHandler  () {
ws.send({

 user:’’,

dataTime:’’,

msg:’’

})

}

Function messageHandler(e){

Let data = JSON.parse(e.data)

}

3.地理

Gelocation

Window.onload = function(){

Window.navigator.geolocation.getCurrentPosition((position) =>{

Console.log(position);

Console.log(‘东经’,position.coords.longitude);

Console.log(‘北纬’.position.coords.latitude);

})

}

这个可以查询到相关的地图之类的信息