vue|vux(store) 、localstorage、sessionStorage、cookie存储使用总结(vue)

2021-11-15

cookie

浏览器储存
最大4KB
document.cookie = cname + "=" + cvalue + "; " + expires;
document.cookie.split('; ');
有个数限制（随浏览不同）一般不能超过20个；
与服务端通信，每次都会携带在HTTP头中
如果使用cookie保存过多数据会带来性能问题
(尽量不用)

【vue|vux(store) 、localstorage、sessionStorage、cookie存储使用总结(vue)】
localstorage

本地永久存储
以文件的方式存储在本地
字符串
适合存储用户登录信息
不同页面之间的传值
需手动清除：localstorage.clear()
localStorage.getItem(key);
localStorage.setItem(key,value);
localStorage.removeItem(key);

sessionStorage

(临时存储)
关闭页面后自动清除，页面刷新不会清除)
字符串(json对象可序列化成字符串存储)
不同页面之间的传值
sessionStorage.getItem(key)
sessionStorage.setItem(key,value)
sessionStorage.removeItem(key)
sessionStorage.clear()

store (vuex)

（临时存储）
F5刷新vuex存储的值会全部丢失
字符串/对象
vuex用于组件之间的传值
多个组件共用一个数据源（对象或数组）时，一个组件改变了该数据源，其他组件响应该变化

url传值
vue单页面分享时会附带（移动端），造成信息读取错误

推荐阅读

上一篇：Wikioi P1004 四子连棋

下一篇：堆|树-堆结构练习——合并果子之哈夫曼树（C/C++实现）