如何监听Storage值的变化

问题：最近在做vue项目时遇到一个监听storage值变化的问题，当时直接在watch进行监听发现不能及时监听到其数值的变化。

解决：查阅一些博客后找到一种解决方案，特此分享给大家：

第一步：在window或Vue实例上绑定一个StorageEvent事件：

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

第二步：在设置storage时进行调用：

 this.$addStorageEvent('存储类型', "事件名字",'storage存储的值');

第三步：具体监听数据值的变化：

window.addEventListener('setItem', (e) => {
        console.log(e, '变化的值');
      });