Chrome中window.addEventListener('storage')监听存储变更无效问题排查

嘿，这个坑我之前也踩过！问题出在浏览器对storage事件的触发规则上，不是你的代码写错了——给你详细说说：

核心原因：storage事件的触发限制 #

storage事件只会在同源的其他页面/标签页中触发，在当前修改localStorage的页面里是不会触发这个事件的。也就是说：

• 你在当前页面点击Set或Clear按钮，当前页面的storage监听函数不会执行
• 但如果打开同一个网站的另一个标签页，在原页面操作Set/Clear，新标签页的控制台就能看到storageEvent的输出了

如何验证？ #

• 先打开你的页面，保持它在后台
• 再打开一个相同地址的新标签页
• 在第一个页面点击Set或Clear按钮
• 切换到第二个标签页，打开开发者工具的Console面板，就能看到预期的输出了

如果想在当前页面也监听localStorage变化？ #

如果需要在当前修改localStorage的页面也捕捉到变化，可以自己封装localStorage的方法，手动触发自定义事件：

// 保存原有的setItem方法
const originalSetItem = localStorage.setItem;
localStorage.setItem = function(key, value) {
  originalSetItem.apply(this, arguments);
  // 触发自定义的localstorage变化事件
  const changeEvent = new CustomEvent('localstorageUpdated', {
    detail: { key, newValue: value }
  });
  window.dispatchEvent(changeEvent);
};

// 同样处理clear方法
const originalClear = localStorage.clear;
localStorage.clear = function() {
  originalClear.apply(this, arguments);
  const clearEvent = new CustomEvent('localstorageCleared');
  window.dispatchEvent(clearEvent);
};

// 监听自定义事件（当前页面的变化）
window.addEventListener('localstorageUpdated', function(e) {
  console.log('当前页面修改了localStorage:', e.detail);
});
window.addEventListener('localstorageCleared', function() {
  console.log('当前页面清空了localStorage');
});

// 保留原有的storage事件监听（监听其他页面的变化）
window.addEventListener('storage', function(storageEvent){ 
  console.log('其他页面修改了storage:', storageEvent); 
});

内容的提问来源于stack exchange，提问作者Freelancer