使用localStorage解决浏览器刷新后无法再从vuex中获取数据的问题

最新推荐文章于 2024-06-28 23:50:07 发布
最新推荐文章于 2024-06-28 23:50:07 发布
阅读量2.7k 收藏
点赞数 2
分类专栏： 前端解决方案 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fabulous1111/article/details/79359998
版权

假设有这样一个场景：用户登录后，用vuex管理用户的信息，登录成功后进入主界面，在进入主界面后刷新浏览器，此时vuex中的用户信息将无法获取到。那么应该如何解决？

办法之一是使用localStorage保存用户信息。在登录成功后保存用户信息，刷新浏览器后从localStorage中获取用户信息，然后再通过vuex管理（mapMutations、mapGetters）。刷新浏览器后vuex中的数据消失，需要再次从localStorage中获取。

ECMAScripter
关注
专栏目录
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
12-09
非常不多说了，直接给大家贴代码了，具体代码如下所示： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min
详解vuex持久化插件解决浏览器刷新数据消失问题
10-17
然而，当浏览器页面被刷新时，Vuex 中的 state 数据会丢失，因为它们存储在内存中。为了解决这个问题，我们可以使用Vuex 持久化插件，如 `vuex-solidification` 插件。 `vuex-solidification` 插件的工作原理是通过...
localStorage和sessionStorage的监听
weixin_44251396的博客
07-26 3076
1.先在src下新建utils文件夹，新建tools.js，它会抛出一个dispatchEventStroage方法 export default { //localStorage dispatchEventStroage() { const signSetItem = localStorage.setItem localStorage.setIte...
Nuxt中使用localStorage
2401_85955297的博客
06-28 303
nuxt中使用直接使用localStorage会报错，localStorage is not defined
封装html5不能刷新,html5 – localStorage在页面刷新后不检索值
weixin_39882948的博客
06-07 158
我正在尝试测试html5 localStorage功能.出于某种原因,每当我尝试在刷新页面后从存储中检索值时,我只返回返回的空值. (如果我尝试在我设置它们的同一个函数中检索值,那么我可以正确地检索它们).一件事：我正在加载的html / javascript是从本地磁盘请求的(例如,我正在使用字符串：“file：/// C：/testLocalStore.html”来浏览文件,而不是从Web服务...
利用localstorage解决vuex页面刷新数据丢失问题
qq_23260455的博客
09-07 3049
一、场景描述： 根据用户的登录状态来实现不同的路由跳转，这个功能之前有写到用三目运算来实现。那么这个用户状态又怎么做呢，怎么在登录期间刷新页面而不丢失用户信息？首先想到Vuex作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。 二、解决思路： 将用户信息更新至vuex中并保存到local storage，这样页面刷新或者其他页面都可以读取到用户信息。 具
结合localStorage解决vuex页面刷新数据丢失的问题
lyf的博客
12-12 5710
将需要保存在vuex中的数据同时保存在localStorage，并在store.js中写入以下代码： for(var item in state){ localStorage.getItem(item)?state[item] = JSON.parse(localStorage.getItem(item)): false; }
使用vuex解决刷新页面state数据消失的问题记录
10-17
然而，一个常见的问题是，当用户刷新页面时，Vuex中的state数据会丢失，因为Vuex的状态不会自动持久化。这篇内容将探讨如何解决这个问题。 首先，我们要理解Vuex的优势和劣势。Vuex的优势在于提供了一个集中式存储...
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
08-27
总结来说，结合使用 `sessionStorage` 和 Vuex 可以有效地解决页面刷新后数据丢失的问题，特别是对于需要跨页面共享且在刷新后仍需保留的状态。然而，要记住，Vuex 主要用于管理组件间的通信和状态，而 `...
关于页面刷新vuex数据消失问题解决方案
08-30
总的来说，对于Vuex数据在页面刷新后消失的问题，我们可以选择使用localStorage或其他持久化存储配合Vuex的机制来保存和恢复状态。使用Proxy提供了一种相对灵活且侵入性较小的方法，但可能需要根据项目的具体需求...
解决Vue刷新后页面数据丢失的问题（sessionStorage和localStorage的用法）
Vivien_CC的博客
10-14 6671
其二，使用sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。【页面关闭就没有了】
localstorage封装(增加缓存前缀、有效时间、数据类型处理等)--实战必备
无翼之雀的博客
10-26 2662
localstorage封装（ts版）封装后，主要解决了如下问题： 1. 增加了缓存前缀。解决了不同项目放在同一个域名下，缓存名称不做区分可能导致重名或者混淆的情况。 2. 对缓存的值进行了处理。解决了localStorage的值类型只能为string类型的问题，封装后的set方法可以对json对象类型等数据类型进行直接存储，不需要额外做转换。 3. 增加了有效（失效）时间。原生的localStorage保存的数据是没有过期时间的，只能通过手动删除。封装后的缓存可以在读取（get）的时候判断是否过期。
vue登录成功后导航栏获取不到用户信息
高电平的博客
02-12 1038
完美解决【使用v-if判断localStorage(或sessionStorage)中是否存在用户信息来识别用户是否登录，进而更新导航栏上的用户信息】
Vue的本地存储localStorage、登录拦截、element-ui分页
weixin_68193389的博客
11-03 279
对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage注意:sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON。
Vue项目保持用户登录状态（localStorage + vuex 刷新页面后状态依然保持）
iijik55的博客
07-31 3805
在前端项目开发中，实现用户的登陆注册功能时常常会有一个问题，那就是我们设置的登录状态，在浏览器页面刷新后就消失了，这其实只是因为我们没有保存用户状态。这里小马演示使用的是+方法（其他诸如sessionStorage、cookie等用法相同，只是功能有所区别）。实现功能用户登录成功后，刷新浏览器页面或者关闭浏览器再次打开网页后，登录状态依然保持，直到用户点击登出。...
使用 localstorage 写入浏览器并获取
梓鸿
03-04 1529
使用 localstorage 写入浏览器并获取 写入：以字符串的形式写入 localStorage.setItem('data', JSON.stringify(arr)); 获取： 注意：一定要使JSON.parse转为对象才能取出来，不然是空的 const data1 = localStorage....
封装localStorage本地存储的方法
weixin_44230315的博客
09-26 1152
从后台动态获取，在页面刷新或者不小心退出页面，需要保存这些值的状态
vuex结合localstorage实现刷新后数据不丢失且保持组件内通信
Yss915的博客
03-10 978
可以结合两者，刷新后数据不丢失且保持组件内通信，原理为在对vuex进行保存数据时，同时对localstorage进行保存数据，读取数据时将localstorage的数据赋给vuex，然后返回vuex的值。2.将ballVisible直接在data中赋值，数据改变时，通过watch是监听不到的，因为data里的数据在组件加载完成后就初始化完了，只能被动改变，不能自动做出更新，想要实现。3.使用localstorage存储数据，通过watch也是监听不到的，因为数据保存在本地，不在内存中。
解决刷新页面vuex数据获取不到的问题
柒个橙子的博客
10-26 7177
现象： 一进入页面可以在mounted中获取到vuex中的数据， mounted() { console.log('???? ~ this.$store.state.user.companyId', this.$store.state.user.companyId); } 但是刷新页面后就获取不到了。 解释： 刷新页面vue实例重新加载，store被重新赋值，要想存储数据就必须存储在外部。 解决思路： 在用户登录之后，获取到用户信息，在存储store数据的同时，再存储到localStorage中。
vuex数据刷新消失
最新发布
07-19
Vuex是一个专为Vue.js应用程序设计的状态管理模式，它将应用的所有组件共享的数据统一存储在一个集中式的store中。如果你发现数据在刷新页面后消失了，这可能是由于几个原因： 1. **状态管理生命周期**：在Vue中，当组件卸载或刷新时，Vuex store内的状态会自动从内存中清除，以避免内存泄漏。如果你想在页面刷新后保留数据，需要在`beforeDestroy`生命周期钩子或者保存状态到本地存储（如localStorage或cookie）。 2. **actions和mutations处理**：检查你的actions和mutations是否正确地更新了state，并且在commit mutation时有没有依赖于浏览器环境的行为，比如从服务器获取数据。如果数据是从服务器动态获取并缓存的，可能需要在页面刷新前重新加载数据。 3. **模块化结构**：如果Vuex使用了模块化（modules），确保你在适当的地方导入和导出了需要持久化的数据。 4. **全局守卫**：可以考虑使用Vue的路由守卫（`beforeRouteUpdate`或`beforeEach`）在切换路由时同步或重新加载数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值