vue 监听localStorage、sessionStorage变化

时间:2021-7-4 作者:qvyue

如何实时监测storage的变化

一、不同浏览器页签间的监听(sessionStorage、localstorage、vuex的变化都可以监听到)

使用场景:同一个浏览器,以用户最后一次登录账号为准(使用localStorage存储)。

mounted() {
    window.addEventListener('storage', (e) => {
      console.log("storage值发生变化后触发:", e)
    });
  },

弊端:同一个浏览器页签,修改storage的值,监听不到

二、同浏览器页签的监听(sessionStorage、localstorage均可)

使用场景:storage发生变化,执行某些方法。
main.js中:(sessionStarage雷同)

let orignalSetItem = 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
  orignalSetItem.apply(this, arguments);         // 设置值
}

使用:

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

弊端:不同浏览器页签(相同地址),修改storage的值,监听不到

三、浏览器页签的监听(sessionStorage、localstorage均可)

 mounted() {
    window.addEventListener('storage', (e) => {
      console.log("别的浏览器页签storage发生变化啦:", e)
    });
    window.addEventListener("setItemEvent", (e) => {
      console.log("localStorage值发生变化后触发:", e.newValue);
    });
  },

这样,不管是同浏览器页签还是不同浏览器页签,就都能监听到啦~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。