vuex页面刷新后数据丢失的方法
作者:jrue 时间:2024-05-09 15:19:29
1. 原因
(1)js代码是运行在内存中的,代码运行时的所有变量、函数都是保存在内存中。
(2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值。
(3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。
2. HTML5提供的2种客户端存储数据的新方法
localStorage存储数据:
(1)存储的数据是永久性的,永不过期;
(2)作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据(不论该源的脚本是否真正的访问localStorage)。
他们可以互相读取对方的数据,甚至可以覆盖对方的数据。但是,非同源的文档间互相都不能读取或者覆盖对方的数据。(即使他们运行的脚本是来自同一台第三方的服务器也不行)。
sessionStorage存储数据:
(1)会话,当浏览器关闭时会话结束并清除数据,有时间期限;
(2)存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的,一旦窗口或者标签页被永久关闭了,
那么所有通过sessionStorage存储的数据也都被删除了。
3.具体实现(登入后保存状态,退出后移除状态)
// vuex mutations
const mutations = {
setToken(state, token) {
// 保存用户认证Token
sessionStorage.setItem('token', token);
state.token = token;
},
setUser(state, user) {
// 保存用户信息
sessionStorage.setItem('user', JSON.stringify(user));
state.user = user;
},
// 注销登录,清除token
logout(state) {
state.token = null;
state.user = null;
sessionStorage.removeItem('token');
sessionStorage.removeItem('user');
}
};
// vuex getters
const getters = {
getToken(state){
if(state.token === null){
state.token = sessionStorage.getItem('token')
}
return state.token;
},
// 获取当前用户登录信息
getUser(state) {
if(state.user === null) {
state.user = JSON.parse(sessionStorage.getItem('user'));
}
return state.user;
}
};
来源:https://segmentfault.com/a/1190000017805890
标签:vuex,页面刷新,数据丢失
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php中关于普通表单多文件上传的处理方法
2023-11-14 20:21:21
透彻掌握ASP分页技术
2009-03-09 18:26:00
python 实用工具状态机transitions
2023-11-06 21:53:41
Python3+Requests+Excel完整接口自动化测试框架的实现
2022-12-12 00:19:52
![](https://img.aspxhome.com/file/2023/2/105792_0s.jpg)
python利用dlib获取人脸的68个landmark
2023-07-25 15:28:19
一些需要禁用的PHP危险函数(disable_functions)
2023-11-23 15:29:25
django之常用命令详解
2023-02-04 07:25:19
MySQL中union和order by同时使用的实现方法
2024-01-26 22:48:45
![](https://img.aspxhome.com/file/2023/9/124549_0s.png)
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2021-04-16 10:50:05
python中数组和矩阵乘法及使用总结(推荐)
2021-11-30 04:29:31
Python爬虫中Selenium实现文件上传
2023-03-27 22:00:26
![](https://img.aspxhome.com/file/2023/7/76957_0s.png)
解决Golang并发工具Singleflight的问题
2024-04-25 15:07:17
![](https://img.aspxhome.com/file/2023/1/134201_0s.png)
PyTorch加载自己的数据集实例详解
2022-07-29 14:10:36
什么是XSLT,什么是XPath
2008-01-21 13:12:00
人工智能学习Pytorch教程Tensor基本操作示例详解
2021-06-14 17:39:22
![](https://img.aspxhome.com/file/2023/6/117936_0s.png)
js函数setTimeout延迟执行的简单介绍
2024-05-05 09:15:14
MySQL 中这么多索引该怎么选择
2024-01-17 12:58:54
Python实现Wordcloud生成词云图的示例
2021-09-06 05:29:15
![](https://img.aspxhome.com/file/2023/4/81874_0s.jpg)
Golang JSON的进阶用法实例讲解
2024-02-20 00:24:00
python类属性学习深入讲解
2021-03-25 06:05:34
![](https://img.aspxhome.com/file/2023/7/66747_0s.png)