vue3中对本地存储的数据多次修改并实时页面显示

背景:项目中遇到切换用户时,对App页面的信息进行实时显示,登录时存储一次,切换时再次存储;

解决办法:

1.在每次存储的同时存储到pinia中,可解决实时显示问题;


          import {useCommonStore} from '@/pinia'
………………………………………………………………………………
          ls_setItem(allLocalStorageName.userInfo, res.user);
          let commonStore = useCommonStore();
          commonStore.userInfo=res.user

2.在pinia的state中对值设置本地存储的数据,解决刷新页面时数据丢失问题。

userInfo:ls_getItem(allLocalStorageName.userInfo),

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3,你可以使用浏览器提供的本地存储机制来存储数据。常用的本地存储方式包括localStorage和sessionStorage。 localStorage是一种持久化的本地存储方式,存储的数据会一直保存在浏览器,直到被手动清除或过期。你可以使用`localStorage.setItem(key, value)`方法来存储数据,使用`localStorage.getItem(key)`方法来获取数据,使用`localStorage.removeItem(key)`方法来删除指定的数据。 sessionStorage是一种会话级别的本地存储方式,存储的数据会在浏览器会话结束后被清除。你可以使用`sessionStorage.setItem(key, value)`方法来存储数据,使用`sessionStorage.getItem(key)`方法来获取数据,使用`sessionStorage.removeItem(key)`方法来删除指定的数据。 在Vue 3,你可以在组件的生命周期钩子函数使用这些方法来实现数据本地存储。例如,在created钩子函数可以使用`localStorage.setItem(key, value)`方法来存储数据,mounted钩子函数可以使用`localStorage.getItem(key)`方法来获取数据。 需要注意的是,localStorage和sessionStorage只能存储字符串类型的数据,如果需要存储对象,可以使用JSON.stringify()方法将对象序列化为字符串进行存储,使用JSON.parse()方法将字符串反序列化为对象进行读取。 另外,如果你想在Vue组件之间共享数据,也可以考虑使用Vuex状态管理库或Vue的provide/inject特性来实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值