vue监听localStorage和sessionStorage缓存的数据变化

1、在main.js写一个dispatchEvent派发事件

Vue.prototype.$addStorageEvent = function (type, key, data) {
  let newStorageEvent;
  if (type === 1) {
    // 创建一个StorageEvent事件
    newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        localStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItemEvent', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  } else {
    // 创建一个StorageEvent事件
    newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItemEvent', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  }
}

2、存放缓存数据

 onSubmit (defaultVal) {
   const searchParam = {
      test1: defaultVal.test1,
      test2: defaultVal.test2,
      test3: defaultVal.test3
    }
    this.$addStorageEvent(1, "searchParam", JSON.stringify(searchParam))
  }

3、vue组件当中监听localStorage数据变化，来赋值，监听要写在mounted ()中

 mounted() {
  	window.addEventListener('setItemEvent', this.getList)
},
methods: {
    getList() {
      // 当缓存数据变化时，进行业务逻辑处理
      let queryParam = JSON.parse(localStorage.getItem("searchParam"))
      ...
   }
}