VUE 全局监听sessionStorage变化

在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了。

首先在全局的main.js中写入:

// 全局获取缓存数据
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'watchStorage') {

      // 创建一个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);
  }
},

设置/修改方法就简单了:

 Vue.prototype.resetSetItem('watchStorage', 'false'); (在API中引入,引入文件为:import Vue from 'vue' )

或:

 this.resetSetItem('watchStorage','false');
 
在需要的地方进行监听:
 
window.addEventListener('setItem', ()=> {
      _this.newVal = sessionStorage.getItem('watchStorage');
})

监听方法可以写在文件的create 或mounted中即可。

posted @ 2019-11-01 10:10  疯癫释流年  阅读(10559)  评论(0编辑  收藏  举报