【Vue】跨页面监听 localstorage 的值变化

此文档为个人归纳笔记，非原创

1. 重写 setItem
   在 src -> utils 中创建 tool.js，对 localstorage 的 setItem 事件进行重写，当使用setItem的时候，触发window.dispatchEvent派发事件。

function dispatchEventStroage() {
    //定义一个变量让setItem函数的值指向它
    let originalSetItem = localStorage.setItem;
    //重写setItem函数
    localStorage.setItem = function (key, newValue) {
        //创建setItemEvent事件
        let event = new Event("setItemEvent");
        event.key = key;
        event.newValue = newValue;
        //提交setItemEvent事件
        window.dispatchEvent(event);
        //执行原setItem函数
        originalSetItem.apply(this, arguments);
    }
}

export default dispatchEventStroage;

2. 全局导入
   在 main.js 中引入 tool 工具。

import tool from "./utils/tool";

const app = createApp(App)
app.use(tool)

3. 页面引用

 mounted() {
    //添加setItemEvent监听事件
    window.addEventListener("setItemEvent",  (e) => {
      //监听key为student的localstorage变化
      if (e.key === "student") {
        let oldValue = localStorage.getItem("student");
        if (oldValue !== e.newValue) {
          console.log(
            "localStorage的student值发生改变,由" +
              oldValue +
              "改变为" +
              e.newValue
          );
          this.handleUpdateNewValue();
        } else {
          console.log("localStorage的student值" + e.newValue);
        }
      }
    });
  },