在vue中如何监测sessionStorage的变化？

---

很早以前写的笔记，很粗略，以至于我自己现在翻看都看不懂了🤡

最近项目中又用到了这个知识点，各方搜集材料，整理出了更加完备的方案，供大家参考！

---

第一步：在main.js中重写StorageEvent事件

// 重写sessionStorage
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);
}

第二步：存储session

key：'loginStatus'    value: 'true'

this.setSessionItem('loginStatus', 'true') 

第三步：添加对sessionStorage的监听

mounted() {
  // 添加对 sessionStorage 的监听
  window.addEventListener("setItem", (e) => {
    if(e.key === 'loginStatus' && e.newValue === 'true') {
       //当key为loginStatus 并且 值为true时，执行start方法
       this.start()
    }else if(e.key === 'loginStatus' && e.newValue === 'false') {
       this.end()
    }
  });
},