vuex页面刷新数据丢失的解决办法

檀小泡泡

已于 2023-03-04 19:39:40 修改

阅读量709

点赞数

分类专栏： VUE 文章标签： vuex

于 2021-04-12 22:46:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42371145/article/details/115645727

版权

本文介绍了在Vue项目中使用Vuex进行全局状态管理时遇到的数据丢失问题及其原因。提出利用localStorage、sessionStorage或cookie来存储数据，以解决页面刷新后的数据持久化。在Vuex中，推荐使用sessionStorage，因为它是同源窗口下有效的，适用于单页面应用。文章详细阐述了如何在页面刷新前后操作sessionStorage和Vuex store，通过在`created`和`beforeunload`生命周期钩子中处理数据，确保数据在页面刷新时不丢失。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。

原因：

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化

解决思路：

将state的数据保存在localstorage、sessionstorage或cookie中（三者的区别），这样即可保证页面刷新数据不丢失且易于读取。

localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
cookie:cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

由于vue是单页面应用，操作都是在一个页面跳转路由，因此sessionStorage较为合适,原因如下：

sessionStorage可以保证打开页面时sessionStorage的数据为空&#