详解xuex、localStorage、sessionStorage、cookie以及session的区别

一、背景

1、vuex

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化（vuex的状态存储是响应式的）。经常用于大型单页面应用的状态管理。

2、localStorage和sessionStorage

Html5新增加了两个用于存储的特性，用于解决cookie和session的不足产生的。localStorage和sessionStorage，存在于 window 对象中：localStorage 对应window.localStorage，sessionStorage 对应 window.sessionStorage。

3、cookie和session

cookie和session都是用来跟踪浏览器用户身份的会话方式。，但是两者的应用场景不太一样。Cookie一般用来保存用户信息，Session主要作用是通过服务端记录用户的状态。

二、异同点

接下来将分别从数据保存的位置、基本使用方法、生命周期、容量限制、域名限制、数据结构等方式进行比较。

vuex

vuex保存在内存中，用于组件之间的响应式的共享传值，当关闭浏览器或者刷新页面（F5刷新，即清除内存）的时候vuex存储的值会丢失。

localStorage（本地存储）

localStorage（本地存储）中的值以字符串类型的方式永久存储在本地文件中，主要用于不同页面之间的传值。只要在相同的协议、相同的主机名、相同的端口下（即在同源的情况下），就能读取/修改到同一份localstorage数据，即localStrage无法跨域访问保存的数据。页面关闭之后依然保存在本地文件中，除非手动清除本地文件。目前业界基本上统一为5M，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。

sessionStorage（会话存储）

临时保存，会以字符串类型的方式将对应的值保存在会话窗口中，即在相同的协议、相同的主机名、相同的端口且同一窗口（即浏览器的标签页）下，可以读取/修改到同一份sessionStorage保存的数据。sessionStorage保存的数据在页面关闭后就自动清除。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。

cookie

Cookie是将数据存储在客户端；Cookie安全性不高；Cookie可以长期储存，能够设置过期时间；Cookie最大可以存储不超过4KB大小数据；Cookie不占用服务器资源。

session

Session将数据存储在服务端，Session实现了安全存储；Session默认储存时间为30分钟；Session没有存储大小限制；Session需占用服务器资源。

三、总结

	保存的位置&生命周期
vuex	保存在内存中，关闭浏览器或者刷新页面保存的值会丢失
locaStorage	永久保存在本地文件中，不手动清除永久存在
sessionStorage	临时保存在会话窗口中，关闭浏览器或者关闭标签页保存的数据会丢失，刷新页面数据不会消失
cookie	保存在客户端浏览器中，可设置失效日期，失效日期前均有效
session	保存在服务器端，默认储存时间约30分钟

	容量限制&域名限制&其他
vuex	没有容量限制；可以利用代理服务器解决跨域；一般用于不同组件间响应式的传值，可以实时更新视图
localStorage	容量最大为5M，超出会报错；同源情况下可读取/修改已保存数据；用于不同页面之间传值
sessionStorage	容量无限制；同源且同标签时可读取/修改已保存数据；用于不同页面之间的传值
cookie	容量最大为4K；存储cookie是浏览器提供的功能。cookie 其实是存储在浏览器中的纯文本，浏览器的安装目录下会专门有一个 cookie 文件夹来存放各个域下设置的cookie。每个域名下的cookie 的大小最大为4KB，每个域名下的cookie数量最多为20个
session	没有容量限制；

本文参考文章有：
https://blog.csdn.net/ljlinjiu/article/details/102897220
https://zhuanlan.zhihu.com/p/536417650
https://zhuanlan.zhihu.com/p/400771798