关于vuex状态刷新网页时数据被清空问题及解决
作者:不过期的约定 时间:2024-04-30 10:22:18
vuex状态刷新网页时数据被清空问题
vuex状态管理,在网页刷新数据被清空的解决方法。
在main.js中写入下面的代码段(亲测有效)
//刷新保存状态
if (sessionStorage.getItem("store")) {
store.replaceState(
Object.assign(
{},
store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//监听,在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(store.state));
});
vuex状态在页面刷新时,会清空状态的解决
store写入的state在页面刷新时会被清空,这时可以用sessionStorage缓存状态。因为localStorage会永久保存数据,只有用户手动清除的时候才会清除。cookie存储内存只有4k,并且始终在同源的http请求中携带。而sessionStorage在关闭浏览器页面时就会清空。
因为状态只会在刷新页面的时候清空,所以我们只需要去app.vue里面在页面刷新之前把store保存在sessionStorage里面。在页面加载时读取sessionStorage的值
由于浏览器存储时会自动把对象转换成字符串格式,且不具备转换对象的键和值为字符串的效果,只会转换为[object,object]。因此需要先将对象转换为json字符串存储,取出时再使用JSON.parse()方法转换为json对象。
app.vue
created () {
? ? // 在页面加载时读取sessionStorage
? ? if (sessionStorage.getItem('store')) {
? ? ? this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
? ? }
? ? // 在页面刷新时将store保存到sessionStorage里
? ? window.addEventListener('beforeunload', () => {
? ? ? sessionStorage.setItem('store', JSON.stringify(this.$store.state))
? ? })
? }
来源:https://blog.csdn.net/chen123789hkb/article/details/90175607
标签:vuex,刷新网页,数据,清空


猜你喜欢
git设置忽略文件.gitignore的方法
2023-05-18 02:12:19
Python多进程并发与多线程并发编程实例总结
2023-06-28 02:16:15
Python使用sorted对字典的key或value排序
2023-12-12 06:36:53
如何理解python对象
2022-09-04 06:58:54
python实现发送邮件及附件功能
2023-12-30 23:27:04

PyQt5 QSerialPort子线程操作的实现
2023-08-21 13:07:28
mysql中json_extract的使用方法实例详解
2024-01-19 04:28:04
python链接sqlite数据库的详细代码实例
2024-01-20 12:17:00

python通过exifread模块获得图片exif信息的方法
2023-08-18 05:00:15
网页广告 Banner 设计图文手册
2007-10-18 19:56:00

Python实现mysql数据库中的SQL文件生成和导入
2024-01-22 01:04:41

JS 中触发 A 标签的点击事件
2009-01-11 17:30:00
基于php解决json_encode中文UNICODE转码问题
2023-07-02 20:51:22
常用ASP自定义函数集 (S.Sams)
2010-05-27 12:24:00
ASP的错误代码都有哪些?
2009-10-28 18:15:00
python自动化之re模块详解
2021-07-01 19:34:16
python导入坐标点的具体操作
2023-02-24 19:59:46

python pandas库读取excel/csv中指定行或列数据
2022-10-11 21:05:04

innerHTML 引发“未知的运行时错误”
2008-04-09 13:06:00
提升Go语言开发效率的小技巧实例(GO语言语法糖)汇总
2023-07-08 10:01:26