# vue 项目中监听 localStorage的变化，（非父子组件除过传值，获取数据变化）

vue 项目中监听 localStorage的变化，（非父子组件除过传值，获取数据变化）

first :
main.js 中给 Vue.protorype 注册一个全局方法，然后创建一个 StorageEvent 方法，当我在执行sessionStorage.setItem(k, val) 的时候，初始化事件并派发事件。

Vue.prototype.$addStorageEvent = function (key, data) {
    // 创建一个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);
}

second : 在你需要存储的组件内 -----写入缓存

 api.msgnumber.findSMSBalance().then((res) => {
                if (responseValidate(res.data)) {
                    this.$addStorageEvent("userInfo", JSON.stringify(res.data.data)); 
                }
            });

third :
在你需要监听的页面去监听做操作

  mounted() {
    this.check();
    window.addEventListener('setItem', (e) => {
        if (e.key === 'userInfo') {
            this.Msgvalue = JSON.parse(e.newValue);
        }
    });
  },
  methods: {
    check() {
      api.msgnumber.findSMSBalance().then(res => {
        if (responseValidate(res.data)) {
          this.Msgvalue = res.data.data;
          localStorage.setItem('userInfo', JSON.stringify(res.data.data));
        }
      });
    },
  }

好了，有了