[JavaScript知识库]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插件实现数据持久化_云卷云舒%的博客-CSDN博客_vuex-persistedstate怎么用