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

最新推荐文章于 2024-07-01 00:20:20 发布

子非鱼-汤斯维尔

最新推荐文章于 2024-07-01 00:20:20 发布

阅读量1.2k

点赞数

文章标签： vue.js 缓存前端

本文链接：https://blog.csdn.net/weixin_44190511/article/details/133314471

版权

本文介绍了如何在Vue应用中使用`dispatchEvent`派发`StorageEvent`监听localStorage和sessionStorage的变化，以及如何在组件中存储和处理缓存数据。

摘要由CSDN通过智能技术生成

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"))
      ...
   }
}