浏览器中监听localStorage变化

方法一：storage 事件

当同源页面的某个页面修改了localStorage，其余的同源页面只要注册了storage事件，就会触发。 该方法只能监听sessionStorage或 localStorage 中值的变化，不能监听cookie中值的变化。

 // localhost:8080/pageOne 页面
 localStorage.setItem('calling', '55894')
 ​
 // localhost:8080/pageTwo 页面
 window.addEventListener('storage', event => {
     if(event.key === 'calling') {
         services.call(event.newValue)
     }
 })

event对象属性

属性名	作用
domain	发生变化的存储空间的域名
key	设置或删除的键名
newValue	如果是设置值，则是新值，如果是删除值，则是null
oldValue	键被修改之前的值

方法二：setItem 方法重写

在同一个页面中，对 localStorage 的 setItem 方法进行重写

 var orignalSetItem = localStorage.setItem;
 localStorage.setItem = function(key,newValue){
       var setItemEvent = new Event("setItemEvent");
       setItemEvent.newValue = newValue;
       window.dispatchEvent(setItemEvent);
       orignalSetItem.apply(this,arguments);
 }
 window.addEventListener("setItemEvent", function (e) {
     alert(e.newValue);
 });
 localStorage.setItem("name","wang");