解决vue中页面刷新之后store中数据丢失问题
一、store数据丢失
系统登录后获取到系统菜单列表存入store中,发现在刷新页面之后,store中的菜单数据丢失了。
console打印数据
刷新页面之前
刷新页面之后
二、原因
刷新页面时,vue实例重新加载,从而,store也被重置了。store是用来存储组件状态的,而不是用来做本地数据存储的。所以,对于不希望页面刷新之后被重置的数据,使用本地存储来进行存储。
三、本地存储
cookie: 不适合存储大量的数据。
localStorage: 是永久存储,浏览器关闭后数据不会丢失,除非主动删除数据。当关闭页面后重新打开,会读取上一次打开的页面数据。
sessionStorage: 在当前浏览器窗口关闭后自动删除。所以,sessionStorage 最合适。
四、解决方法
监听 beforeunload 这个方法,beforeunload 在页面刷新时触发,监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中。然后,在页面刷新时,读取 sessionStorage 中的数据到 store 中。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|