localStorage 的修改仅能通过 storage 事件监听其他同源页面的变更，本页修改不会触发自身事件；事件包含 key、oldValue、newValue 等信息，受同源限制且私有模式可能禁用。
JavaScript 中无法直接监听同页面内 localStorage 的修改，但可以通过 storage 事件监听**其他同源窗口或标签页**对 localStorage 的更改——前提是修改发生在**不同页面上下文**中（比如另一个标签页、iframe 或新打开的窗口）。
storage 事件只在跨页面时触发
storage 事件的设计初衷就是用于“跨文档通信”：当同一域名下的另一个页面调用 localStorage.setItem()、removeItem() 或 clear() 时，当前页面的 window 对象会收到该事件。本页面自己改的，不会触发自己的 storage 事件。
- ✅ 触发：A 标签页执行
localStorage.setItem('theme', 'dark')→ B 标签页监听到storage事件 - ❌ 不触发：B 标签页自己执行
localStorage.setItem('theme', 'light')→ B 标签页收不到事件
基础监听写法
在需要响应变化的页面中，添加如下监听：
window.addEventListener('storage', (e) => {
console.log('key:', e.key); // 修改的键名，如 'theme'
console.log('oldValue:', e.oldValue); // 修改前的值（null 表示新增）
console.log('newValue:', e.newValue); // 修改后的值（null 表示删除）
console.log('url:', e.url); // 发起修改的页面 URL
console.log('storageArea:', e.storageArea); // 即 localStorage（只读）
});
注意：e.storageArea 指向的是触发事件的那个页面的 localStorage 对象（不可写），通常就是 window.localStorage。
常见限制与注意事项
-
同源限制严格：协议、域名、端口必须完全一致；
http://a.com和https://a.com视为不同源，事件不互通 -
私有模式/无痕窗口可能禁用：部分浏览器在隐私模式下会禁用
storage事件或整个localStorage - iframe 跨域不生效：若 iframe 与父页面不同源，则无法共享 storage 事件
- 无法捕获同步修改细节：例如多个 key 连续 set，可能合并为一个事件（实际行为因浏览器而异，不保证顺序或原子性）
替代方案（当 storage 事件不可靠时）
如果业务强依赖实时感知本页面或其他页面的本地存储变更（比如主题同步、登录态广播），建议补充以下机制：
- 使用
BroadcastChannel API：更可控、支持任意数据、可双向通信，兼容现代浏览器（Chrome 54+/Firefox 38+/Edge 79+） - 配合
CustomEvent+ 全局状态管理：在本页修改localStorage后，主动 dispatch 自定义事件，统一处理逻辑 - 轮询（不推荐）：定时
localStorage.getItem()对比，性能差且有延迟
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
