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中即可。

巴特西

VUE 全局监听sessionStorage变化

最新文章

热门文章