Vue实现实时更新sessionStorage数据的示例代码
作者：云卷云舒%
最近在做一个需求是：页面右上角显示未读消息数量，当用户读过消息后，数量要时时更新。
我这里直接将数据存储在了sessionStorage中，但是当我修改数据时页面并没有及时更新，只有刷新页面后数据才会更新。
解决办法：
1、在main.js中添加全局获取缓存数据
只需修改xxx为自己定义的key即可
Vue.prototype.resetSetItem = function (key, newVal) {
if (key === 'xxxx') {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
sessionStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, newVal);
}
}2.在需要保存数据的地方进行调用
（key，value）
this.resetSetItem('xxxxx', value);3.在需要获取数据的地方进行sessionStorage变化监听
mounted：页面创建的时候添加监听
beforeDestroy： 在页面销毁的时候移除监听
mounted() {
window.addEventListener('setItem', this.updateUnreadMsgCount);
}, methods: {
updateUnreadMsgCount() {
this.unreadMessagesCount = sessionStorage.getItem('xxxxxx');
},
} beforeDestroy() {
window.removeEventListener('setItem', this.updateUnreadMsgCount);
},至此~就可以实现sessionStorage中的数据实时更新了
另外一种实现思路（亲测有效~~~）：
若是将这个数量存储到vuex的话，刷新页面数据会丢失【但是可以使用vuex数据持久化vuex-persistedstate插件解决这一问题，原理也是帮助我们存储在localStorage或者sessionStorage中，并且vuex中的数据变化后页面也会跟着变化】
vuex中使用vuex-persistedstate插件实现数据持久化
vuex是在中大型项目中必不可少的状态管理组件，刷新会重新更新状态，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。
- 那么我们可以采用存储到localStorage的方式来解决这一问题，
- 也可以监听页面刷新的时候重新处理数据
- 也可以用现在比较流行的插件vuex-persistedstate来解决（其实他的原理也是存储在了local storage，但是不用我们手动去处理了）
让我们来看下使用插件是如何做到持久化的
1.安装插件
npm i vuex-persistedstate --save
2.之前怎么写vuex的数据管理还怎么写，只不过在store/index.js文件引入一下这个插件，并配置即可
这种默认写法会将vuex中的所有数据存储到Local Storage中，
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
// ...
plugins: [persistedState()]
})如果我们想存储到sessionStorage，又或者只想持久化某些数据的话，可以使用以下两个属性：
storage和reducer
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
console.log(val)
return {
// 只储存state中的includes的leftList数据【这里多了一层includes，是因为本项目原因，大家可以打印一下val根据自己项目情况来赋值】
leftList: val.includes.leftList
}
}
})
]完整代码如下：
测试1：将所有数据存储到Session Storage中
测试2：将某个数据存储到Local Storage中
另，Vue3中如果项目使用了ts，那么Vuex对ts是不太友好的，可以考虑使用pinia插件代替vuex
到此这篇关于Vue实现实时更新sessionStorage数据的示例代码的文章就介绍到这了,更多相关Vue更新sessionStorage数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！