监听localStorage变化

[xlearns]

storage

• 问题

如何实现同页面监听

(function(){
  //定义一个变量让setItem函数的值指向它
  let originalSetItem = localStorage.setItem;
  //重写setItem函数
  localStorage.setItem = function(key,newValue){
    //创建setItemEvent事件
    let event = new Event("setItemEvent");
    event.key = key;
    event.newValue = newValue;
    //提交setItemEvent事件
    window.dispatchEvent(event);
    //执行原setItem函数
    originalSetItem.apply(this,arguments);
  }
})();

//添加setItemEvent监听事件
window.addEventListener("setItemEvent", function (e) {
  //监听key为author的localstorage变化
  if(e.key ==='author'){
      let oldValue = localStorage.getItem("author")
      if(oldValue !== e.newValue){
          console.log('localStorage的author值发生改变,由' + 
            oldValue + '改变为' + e.newValue);
      }else{
          console.log('localStorage的author值' + e.newValue);
      }
  }
});