vue|vux(store) 、localstorage、sessionStorage、cookie存储使用总结(vue)
cookie
- 浏览器储存
- 最大4KB
- document.cookie = cname + "=" + cvalue + "; " + expires;
- document.cookie.split('; ');
- 有个数限制（随浏览不同）一般不能超过20个；
- 与服务端通信，每次都会携带在HTTP头中
- 如果使用cookie保存过多数据会带来性能问题
- (尽量不用)
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()
- （临时存储）
- F5刷新vuex存储的值会全部丢失
- 字符串/对象
- vuex用于组件之间的传值
- 多个组件共用一个数据源（对象或数组）时，一个组件改变了该数据源，其他组件响应该变化
vue单页面分享时会附带（移动端），造成信息读取错误
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show
- 如何在手机上查看测试vue-cli构建的项目