vue项目监听sessionStorage的变化

一、main.js中

/*实时获取 sessionStorage 的值*/
Vue.prototype.resetSetItem = function (key, newVal) {
//注意categoryNum为要监听的属性，实际开发中请自行修改
  if (key === 'categoryNum') {
      // 创建一个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);
  }
}

二、在保存sessionStorage 的文件中

this.resetSetItem('categoryNum', val);   
// val 为需要保存并监听的数据

三、获取数据的页面

const num = ''
//  监听sessiongStorage的值 动态获取数值  
window.addEventListener('setItem', ()=> {
   num =  JSON.parse(sessionStorage.getItem('categoryNum'))   

只需三步，就可以拿到其他页面实时变动的值了，其中，这是vue2的写法，vue3写法可以自行匹配一下