vue 监听 sessionStorage 的变化

原文链接：https://blog.csdn.net/weixin_41192489/article/details/125069656

将 sessionStorage 的变化注册为全局事件 setItem，在main.js中添加如下代码

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);
};

mounted() {
    // 添加对 sessionStorage 的监听
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },

beforeDestroy() {
    // 移除对 sessionStorage 的监听
    window.removeEventListener("setItem", () => {});
},


向sessionStorage添加数据 this.setSessionItem(key, value);