vue3.0 监听本地存储

Posted 2023-04-03

参考技术A 1. 现在main.js中注册全局方法，比如要监听的本地储存key值为‘changeData’

Vue.prototype.resetSetItem = function (key, newVal)

  if (key === 'changData')

      // 创建一个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 如何触发

在一个路由(比如路由A)存储值得时候，使用下面的方法：

this.resetSetItem('changeData',this.value);

3、如何监听

如果在另外一个路由(比如路由B)中，我们想根据changeData的变化来请求接口刷新页面数据的时候，可以在这个路由中created钩子函数中监听

window.addEventListener('setItem', ()=>

    this.newVal = sessionStorage.getItem('changeData');

)

vue中监听浏览器存储的变化

创建实例:

//main.js 创建实例
Vue.prototype.$addStorageValue = function(key,data,type=true){
  if(type){
    console.log(\'创建一个StorageEvent事件\');
    //创建一个StorageEvent事件
    var newStorageEvent = document.createEvent(\'StorageEvent\');
    const storage = {
      setItem: function(k,val){
        localStorage.setItem(k,val);
          //初始化创建的事件
          newStorageEvent.initStorageEvent(\'setItem\',false,false,k,null,val,null,null);
          //派发对象
          window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key,data);
  }
  else{
     // 此处可以创建一个相同的sessionStorage的实例
     console.log(\'创建一个StorageEvent事件\');
    //创建一个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,data);
  }
  
}

调用:

//store.index.js
//this._vm.$addStorageValue(\'key\',data,type)
this._vm.$addStorageValue(\'personData\',JSON.stringify(state.personData),true)

监听:

  mounted() {
    window.addEventListener("setItem", e => {
      if (e.key === "personData") {
        let val = JSON.parse(e.newValue);
        console.log(val);
      }
    });

完成

本文链接来源于