localStorage单页面及不同页面监听变动

最新推荐文章于 2024-08-01 16:59:42 发布

Leif_SUN

最新推荐文章于 2024-08-01 16:59:42 发布

阅读量5.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_42076140/article/details/80307326

版权

1.单页面监听storage事件

 
  var 
  orignalSetItem = 
  localStorage. 
  setItem; 
 
 
  localStorage. 
  setItem = 
  function( 
  key, 
  newValue){ 
 
 
  var 
  setItemEvent = 
  new 
  Event( 
  "setItemEvent"); 
 
 
  setItemEvent. 
  key= 
  key; 
 
 
  setItemEvent. 
  newValue = 
  newValue; 
 
 
  window. 
  dispatchEvent( 
  setItemEvent); 
 
 
  orignalSetItem. 
  apply( 
  this, 
  arguments); 
 

   } 
 

 
  window. 
  addEventListener( 
  "setItemEvent", 
  function( 
  e) { 
 
 
    console. 
    log( 
    e. 
    key+ 
    "~~~"+ 
    e. 
    newValue) 
   


   }); 
 

2.不同页面

1）监听了storage事件

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  lang= 
  "en" 
  > 
 
 
  < 
  title 
  >A 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  script 
  > 
 
 
  window. 
  addEventListener( 
  "storage", 
  function ( 
  e) { 
 
 
  alert( 
  e. 
  newValue); 
 

   }); 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 
 
  
 
 

2）修改了localStorage

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  lang= 
  "en" 
  > 
 
 
  < 
  title 
  >B 
  </ 
  title 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  script 
  > 
 
 
  localStorage. 
  clear(); 
 
 
  localStorage. 
  setItem( 
  'foo', 
  'bar'); 
 
 
  < 
  / 
  script 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 