不同页面监听的更新事件

window.addEventListener("storage", function(e) {
                console.log(e) 
            });

注意：同域的不同文件会监测到存储值的变化。同一个文件，存储值的变化，监测不到！

当前页面监听localStorage的更新事件

重写localStorage的setItem事件即可

(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);
      }
  }
});

同理，也可以监听localStorage的删除事件removeItem和获取事件getItem

(function(){
		let originalremoveItem = localStorage.removeItem;
		localStorage.removeItem = function(key){
			let event = new Event("removeItemEvent");
			event.key = key;
			window.dispatchEvent(event);
			originalremoveItem.apply(this,arguments);
		}
	})();
	
    window.addEventListener("removeItemEvent", function (e) {
        if(localStorage.getItem("author")){
            if(e.key === 'author'){
                console.log("localStorage的author删除成功");
            }
        }else{
            console.log("localStorage无author值");
        }
    });