解决vuex在页面刷新后数据丢失的问题
一、原因
js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。
刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。
二、解决方案
在客户端存储数据:
HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。
之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。
web存储分为localStorage个sessionStorage。
区别在于存储的有效期和作用域不同。
通过localStorage存储的数据是永久性的,除非web应用刻意删除存储的数据,或者用户通过设置浏览器配置(浏览器提供的特定的UI)来删除,否则数据将一直保存在用户的电脑上,永不过期。
localStorage的作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据(不论该源的脚本是否真正的访问localStorage)。他们可以互相读取对方的数据,甚至可以覆盖对方的数据。但是,非同源的文档间互相都不能读取或者覆盖对方的数据。(即使他们运行的脚本是来自同一台第三方的服务器也不行)。
sessionStorage存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的,一旦窗口或者标签页被永久关闭了,那么所有通过sessionStorage存储的数据也都被删除了。
三、具体实现
//mutations
ADD_LOGIN_USER (state,data) { //登入,保存状态
sessionStorage.setItem("username", data); //添加到sessionStorage
sessionStorage.setItem("isLogin",true);
state.username=data, //同步的改变store中的状态
state.isLogin=true
},
SIGN_OUT (state) { //退出,删除状态
sessionStorage.removeItem("username"); //移除sessionStorage
sessionStorage.removeItem("isLogin");
state.username='' //同步的改变story中的状态
state.isLogin=false
}
//getters
isLogin (state) {
if (!state.isLogin) {
state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态
state.username=sessionStorage.getItem('username');
}
return state.isLogin
}
总体的实现思路是让vuex中store的状态从sessionStorage取值,并和sessionStorage保持一致
getters:{
userInfo(state){
if(!state.userInfo){
state.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
}
return state.userInfo
}
},
mutations:{
LOGIN:(state,data) => {
state.userInfo = data;
sessionStorage.setItem('userInfo',JSON.stringify(data));
},
LOGOUT:(state) => {
state.userInfo = null;
sessionStorage.removeItem('userInfo');
}
},
需要注意的是state里的userInfo初始化一定要是null,而不是{},否则那个判断就一直为true啦(个人遇到的一个小问题)
相关文章
- 【华为云技术分享】华为云MySQL新增MDL锁视图特性,快速定位元数据锁问题
- hibernate+oracle+servlet实现插入数据的时候,不立马显示!!
- 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据
- 【数据库】ORA-01403: 未找到任何数据解决
- JAVA数据库连接的另一种实现及简单的数据插入及显示
- JAVA导出数据到excel中大数据量的解决方法
- 制造业如何利用大数据
- 读书笔记--SQL必知必会03--排序检索数据
- 解决Zabbix自定义用户参数无法获取到数据的问题
- skywalking 追踪没有数据问题解决,服务详情没有数据问题解决,避坑!!!!
- 数据技术初学者不用再东搜西找了,一篇文章解读20个最新数据技术概念
- Atitit 怎么阅读一本书 消化 分析 检索 attilax总结 1. 读书的本质 是数据的处理,大量的数据,处理能力有限的大脑2 2. ETL数据清洗转换 摘要,缩小数据规模2 2.1
- 低代码踩坑记解决无法提交数据的问题
- 成功解决for循环语句中,后几次循环输出数据一直全部为空
- DL之LSTM之UvP:基于TF利用LSTM基于DIY时间训练1200个数据预测后200个数据状态
- android app断电强制保存数据到磁盘(解决断电数据丢失的问题)
- navicat 删除数据连接报错:server is in use and cannot be deleted (已解决)
- 数仓搬迁:从方法到实践,带你解决数据一致性对比
- WebMagic使用代理ip爬数据解决HTTP407问题
- 解决springboot+vue+mybatis中,将后台数据分页显示在前台,并且根据页码自动跳转对应页码信息
- 如何解决海量数据的Top K问题
- 数据串转并电路
- Mysql删除数据特别慢及解决方法
- 数据中台快没得炒作了!Gartner给想建数据中台的一些建议
- ADO.NET入门教程(二)了解.NET数据提供程序
- 【大数据实时数据同步】GoldenGate实时同步异常:OGG-03533:character ‘c2 a0‘ at offset 0 that is not available报错解决