Vuex和缓存(Storage)区别

记录关于Vuex和缓存(Storage)区别,以及cookies和localStorage/sessionStorage的区别

	Vuex	Storage
	由JavaScript程序库提供的服务	由浏览器提供的基础设施
储存位置	内存	以文件的方式存储在本地
易失性	与页面的生存周期相同(如关闭页面、刷新等数据就会消失)	localStorage是永久存储数据,除非代码或手动删除, sessionStorage 生存于应用会话期间,临时存储数据,浏览器关闭后自动清除
储存数据类型	无指定	只能存储字符串类型,对于复杂的对象可以使用JSON.stringify()和JSON.parse()来处理
存储空间	取决于可用内存和浏览器的限制	有默认的大小，最大5M
应用场景	无法跨标签页、跨物理页面使用, 用于组件之间的传值(响应式共享数据)	则可以在同一域名底下共享,主要用于不同页面之间的传值
用途	用于管理页面内容及组件的状态	主要是用于存储数据

---

cookies和localStorage/sessionStorage对比优缺点:

使用cookie做本地存储的缺点

• 存储容量小,最大4KB
• 随http请求一起被发送到服务端,增加了请求数据量,浪费发送cookie时使用的带宽
• 存在安全隐患
• 用户可以操作(禁用)cookie,使功能受限

使用localStorage和sessionStorage做本地存储的优点

• 存储容量大,最大5M
• 不会随http请求一起被发送到服务端,减少了请求数据量
• 提供更简单易用的API,setItem和getItem
• 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage使用方便