记录监听localStorage的变化

A是layout的header组件，选择了一个项后，在B页面实时获取。两个页面十万八千里，于是想到了localStorage存值取值

main.js中

//监听localStorage
Vue.prototype.$addStorageEvent = function(type, key, data) {
    if (type === 1) { //localStorage写1  sessionStorage写2
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function(k, val) {
                localStorage.setItem(k, val);
                // 初始化创建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派发对象
                window.dispatchEvent(newStorageEvent);
            }
        }
        return storage.setItem(key, data);
    } else {
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent('StorageEvent');
        const storage = {
            setItem: function(k, val) {
                sessionStorage.setItem(k, val);
                // 初始化创建的事件
                newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                // 派发对象
                window.dispatchEvent(newStorageEvent);
            }
        }
        return storage.setItem(key, data);
    }
}

A页面存值

 //存localStorage  valuedepart
      localStorage.setItem("valuedepart", this.valuedepart);
      this.$addStorageEvent(2, "valuedepart", this.valuedepart);

B页面取值

 mounted() {
    //刚开始先获取本地
    this.valuedepart = localStorage.getItem("valuedepart");
    //监听本地变化
    window.addEventListener("setItem", (event) => {
      if (event.key === "valuedepart") {
        this.valuedepart = event.newValue
        .............//具体操作
      }
    });
 }