客户端本地存储（cookie、web Storage、vuex）选择

一、cookie 、localStorage 、sessionStorage 、vuex 比较

cookie   4K    有时效性    可服务器传递

cookie是由服务器产生，存储在客户端的一段信息，在同源（即：协议、主机地址、端口号一致）的http请求头上携带（即使不需要）

在浏览器和服务器之前来回传递，用来处理客户端和服务器通信。

若设置了过期时间，则在过期时间之前，一直存储在浏览器中，即使窗口或浏览器关闭也有效。（保存在硬盘）

若不设置过期时间，窗口或浏览器关闭立即失效。（保存在内存）

HTTP这一列，如果在setCookie的时候，把HTTPOnly设置为true，这里就会打钩，那么cookies就只能被server服务器端来读取或是修改，客户端没有权限进行读取和修改。

例如，我们在进行身份验证的时候，就可以使用这个。

Secure：与安全相关，如果设置了，那么请求只能是来自HTTP加密请求。

HTML5 Web Storage   5M  仅本地保存，不会自动发送服务器    隐私模式不可读取、不可被爬虫抓取

WebStorage提供两种类型的API：localStorage和sessionStorage，两者的区别看名字就有大概了解

localStorage在本地永久性存储数据，除非显式将其删除或清空，sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。

两个对象都有共同的API用法，存储对象需要JSON.stringify、JSON.parse

• length:唯一的属性，只读，用来获取storage内的键值对数量。
• key：根据index获取storage的键名
• getItem：根据key获取storage内的对应value
• setItem：为storage内添加键值对
• removeItem：根据键名，删除键值对
• clear：清空storage对象

localStorage   永久存储（除手动删除） 保存在硬盘    兼容IE8+

打开同域的新页面也能访问到，在浏览器打开关闭期间都可以访问,存储在文件的C盘。

地址：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb

sessionStorage  临时存储  关闭页面即清空（刷新不清除）

页面会话在浏览器打开期间一直保持，并且重新加载（F5刷新）或恢复页面（即当前网址变为其他又还原）仍会保持原来的页面会话，不会消除存储数据。

VUEX  保存在内存 刷新页面清除

vuex是状态管理机制，一个组件的数据变化会映射到使用此数据的其他组件，即一个组件的数据变化，另一个组件也能相应到

vuex用于组件间传值，cookie、localStorage、sessionStorage用于页面间传值。刷新页面vuex存储的值丢失，其他三种不变；

不变的数据可用localStorage存储，更新的数据用vuex存储，与服务器沟通的数据用cookie存储。

二、对于不同窗口，不同标签页，不同浏览器下的sessionStorage、localStorag、cookie的状态

1.不同浏览器无法共享，即：在Chrome上存储的数据在FireFox上获取不到

2.相同浏览器下的不同窗口或同一窗口不同标签页共享cookie、localStorag

3.sessionStorage在任何情况下都不共享

在当前页面通过a链接或window.location、window.open等打开的新页面可以访问sessionStorage，但是不能共享（同步）。

故同一个窗口，不同标签页之间，相同域名下的sessionStorage可能不一样的。如下图：

     

     

但是如果主动打开一个同源的新窗口或新标签页，原先存储的sessionStorage并不存在

    

也就是说，sessionStorage仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个sessionStorage。

这是因为sessionStorage是页面级的，只有全部关闭当前页和从其内部打开的所有页面，或者直接关闭浏览器，才可以消除当前页的sessionStorage数据。

三、Web Storage API 的storage 事件

对 Storage 对象进行修改，触发 storage 事件。可以对storage事件进行监听，仅支持同源，不支持跨域

且storage 事件只会发送给同源、而且处于打开状态的其它页面，而不会发送给触发改变的页面本身及处于关闭状态的页面。

 使用：

      A 页面 ：localStorage.setItem('key1', 'vakue1')

     B页面：window.addEventListener("storage", function (e) {           

                       e的参数值：

  });                     

A页面写入特定数据触发B页面的storage，页面B响应之后可以再写入数据，通知页面A处理结果，以实现页面通信。

用例：诸如微博应用的“换肤”功能，如果能够实现打开的多个窗口同时更换皮肤，势必能够提高用户体验。

四：postMessage

产品经理总是抱怨打开了多个窗口怎么就不能实现联动？

在一个窗口登录了其它窗口怎么就非得刷新才能使用一些功能？

这些统统可以通过跨页面通信解决。

postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。

发送：otherWindow.postMessage(message、targetOrigin、[transfer]);//调用postMessage方法的window对象是指要接受消息的那一个window对象

监听：message事件 window.addEventListener('message'，function(event){alert(event.data)})

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

a.com/a.html

 window.onload = function() {
        window.addEventListener("message", function(event) {
            alert(event.data);
        });
      //  window.frames[0].postMessage("b data", "http://www.b.com/b.html");  //调用postMessage方法的window对象是指要接收消息的那一个window对象
    }

b.com/b.html

window.onload = function() {
   //      window.addEventListener("message", function(event) {
  //          alert(event.data);
 //       });
        window.parent.postMessage("a需要的数据", "http://www.a.com/a.html");
    }

对比：

postMessage是从a窗口发送信息到b窗口，b窗口监听到消息后做出回应；而localStorage是在a窗口改变某一个存储值，b窗口监听到了存储值的变化，然后获取该值，进而完成通信的同样的效果。

这里推荐视频地址：https://ninghao.net/video/1220