vue全局变量页面刷新时数据丢失问题

2024-05-26 05:25:21

页面刷新后vue全局变量数据丢失

在开发中，我们需要将一些数据存到全局变量中，如用户的用户名等，便于页面展示，保存从服务器发送请求返回的数据，以避免在不同组件发送相同请求时，重复请求服务器。

方法一：保存在js文件中，然后全局引入挂载

common.js:

var typeOptions = []
const testConst = '我是常量'
export default {testConst,typeOptions
}

全局挂载:

import common from './store/common.js'
Vue.prototype.$global = common

在login.vue组件中登录成功后为它赋值

...登录成功后
this.$global.typeOptions = [...]

在需要的组件中第一次使用发现没有问题，并且console.log(this.global.typeOptions)完全没毛病，重点来了!!!刷新页面后发现取不到这个数据了，再次console.log(this.global.typeOptions)完全没毛病，重点来了!!! 刷新页面后发现取不到这个数据了，再次console.log(this.global.typeOptions)完全没毛病，重点来了!!!刷新页面后发现取不到这个数据了，再次console.log(this.global.typeOptions)竟然为空！！

然而console.log(this.$global.testConst)发现可以取到这个值。

原因很简单，在页面刷新时，vue实例对象被重新构造，所有变量都被初始化。

结论：全局变量里的数据最好是const常量，才能在页面刷新后仍然可用。
（ps：在网上看到有这样的解决办法：监听页面刷新，在刷新前先将全局变量存到sessionStorge中，刷新完毕后用钩子函数再次将sessionStorge中的值赋给全局变量。但是个人不太推荐，下面有更直接的方法）

方法二：利用h5的本地存储

保存到localstorge或sessionstorge中，一般浏览器可以存5M（当然，也可以保存在cookies中，但是这种方法不推荐，容量小而且安全性差）
localstorge是永久存储在本地，除非手动删除。
sessionstorge是当前会话有效。
考虑vue是单页面应用，所有组件在同一个页面中跳转，所以sessionstorge最为合适。
因此，推荐使用sessionstorge
sessionstorge存取数据直接用setItem和getItem函数就行辣~~
（当然，如果不想被用户直接在控制台看到存储的信息，推荐第一种）

vue全局变量页面刷新时数据丢失问题相关推荐

nignx部署Vue单页面刷新路由404问题解决
nignx部署Vue单页面刷新路由404问题解决参考文章: (1)nignx部署Vue单页面刷新路由404问题解决 (2)https://www.cnblogs.com/wuchenggong/p/ ...
[html] 页面刷新时sessionStroage会变（会清空）吗？
[html] 页面刷新时sessionStroage会变(会清空)吗? 不会SessionStroage 是数据页面会话级别的, 当你在打开这个页面的时候会被创建, 并且重新加载或恢复页面仍会保持原来 ...
vue.js页面刷新出现闪烁问题的解决
vue.js页面刷新出现闪烁问题的解决参考文章: (1)vue.js页面刷新出现闪烁问题的解决 (2)https://www.cnblogs.com/wnsry/p/9132398.html 备忘一 ...
如何解决页面刷新时白屏的问题？
如何解决页面刷新时白屏的问题? this.isRouterAlive = false this.$nextTick(function () {this.isRouterAlive = true;//写 ...
刷新页面保留input所填的值_页面刷新时保留input键入值
转自:http://unbounder.iteye.com/blog/459183 一般来说,页面刷新时不保留input键入值的需要比较多,但是也有例外,譬如咱这次就遇上需要保留input键入值. 在 ...
html刷新页面信息消失,存储在localstorage中的变量在页面刷新时消失
这是一个网页,您可以从三个单选按钮中选择背景图片.我想将所选的一个保存在本地存储中,因此当页面刷新时,最后一个选定的背景图像将被刷新.情况并非如此,我不明白为什么,是吗?在此先感谢:)存储在local ...
websocket中自动生成身份编号(获取sessionID，将sid值设置为sessionID的方法)，并在页面刷新时沿用sid的解决方案
websocket如果需要1对1通信,或者说将服务器数据发送到指定的客户端上,就需要给每一个新生成的websocket加上编号.比较常见的,是在地址映射中加上编号,比如: @ServerEndpoin ...
解决vuex页面刷新导致数据丢失问题
vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,因为页面刷新之后代码重新加载这样vuex的数据自然就会为空.怎么解决这个问题呢?vuex自身好像没有太好的解决方案,但 ...
vue实现页面刷新以及局部刷新的方法
1.利用Vue里面的provide+inject组合,实现全页面刷新通过在APP页面进行demo进行刷新,不会像前两种那样出现短暂的闪烁效果,提升用户体验,通常可以使用这种方式 (1)在APP页面中 ...

最新文章

热门文章