[vue]在vue中监听LocalStorage/SessionStorage的改变

1 对于不同浏览器页签间的监听

只需要使用window原生的监听器,监听storage的变化

window.addEventListener("storage", (e) => {
      console.log("storage change");
    });

2 对于同浏览器页签间的监听

需要改写setItem事件

在main.js中添加

let orignialSetItem = window.localStorage.setItem;   // 原生localStorage.setItem方法
localStorage.setItem = function(key,newValue){
  let setItemEvent = new Event("setItemEvent");  // 重写注册setItem
  setItemEvent.key = key;                        
  setItemEvent.newValue = newValue;              
  window.dispatchEvent(setItemEvent);            // 派发setItem
  orignialSetItem.apply(this, arguments);         // 设置值
}

使用:

window.addEventListener("setItemEvent", (e) => {
    console.log("localStorage值发生变化后触发:", e.newValue);
});

参考 www.jianshu.com/p/0189d3613…