【vue2】监听 `sessionStorage`存值时的变化

在vue 中，监听 sessionStorage存值时的变化

• 在不适用Vuex的情况下，我们使用SessionStorage 的场景还是比较多的，比如需要存取一些多页面共享的数据时，就需要将数据存储到SessionStorage中，但是有些页面需要拿到最新的存储值，这就需要监听到storage中的最新值。

• 我不是原创，也是网上东一块西一块的拼凑。只是确实需要用到的场景比较多，自己又记不住，所以才记录一下，方便自己，方便他人，仅此而已。

• 创建storageevent事件，挂载到vue原型上,方便全局使用.

  • 代码可以直接写到main.js文件中,也可以在其他文件书写,在main.js中记得引入即可。

// 挂载到vue原型上
Vue.prototype.$setSessionItem = function (key, newVal) {
  // 创建 storageevent 事件
  let newStorageEvent = document.createEvent("StorageEvent");
  const storage = {
    setItem: function (k, val) {
      sessionStorage.setItem(k, val);
      // 初始化 storageEvent 事件
      newStorageEvent.initStorageEvent(
        "setItem",
        false,
        false,
        k,
        null,
        val,
        null,
        null
      );
      // 派发事件
      window.dispatchEvent(newStorageEvent);
    },
  };
  return storage.setItem(key, newVal);
};

• 在组件挂载完成，绑定监听事件（记得移除监听事件，反正别人这么写的，我也不知道具体原因。）

window.addEventListener("setItem",(val)=>{
console.log(val)
})

记得组件销毁之前移除监听事件，

beforeDestroy(){
    window.removeEventListener("setItem",()=>{
    })
}

• 存储值，即使用

this.$setSessionItem("key","value");