vue 对sessionStorage进行监听

• vue项目中，我们有时将数据存到sessionStorage中，但是当某些组件取sessionStorage中的值时，并不能取到最新的更新后值。
  所以我们要对sessionStorage进行监听。当seesionStorage的值发生改变时，组件中sessionStorage的值也跟着实时更新。

1. 在main.js中给Vue.protorype注册一个全局方法。
   其中'lang'为我们想要监听的sessionStorage的key值

// 全局注册事件  监听session 变化
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'lang') {
    // 创建一个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, newVal);
  }
}

2. 给sessionStorage存值

this.resetSetItem('lang', this.lang);

3. 监听sessionStorage变化

// 添加对 sessionStorage 的监听
window.addEventListener("setItem", () => {
  // 当sessionStorage 中的lang值发生变化， 给组件中的值重新赋值
  this.lang = sessionStorage.getItem("lang") 
});