javascript无法直接监听localstorage变化，但可通过storage事件实现跨同源页面通知；当前页修改不会触发自身事件，仅其他同源页面能收到，需手动封装setstorage以同步本页逻辑。
JavaScript 本身无法直接监听 localStorage 的变化，因为原生的 localStorage 没有提供事件机制（如 onchange）。但可以通过 storage 事件实现跨页面的实时通知——前提是修改发生在**其他同源窗口/标签页**中。
storage 事件只在其他页面触发
storage 事件的设计原则是：当前页面修改 localStorage 不会触发自身的 storage 事件，只会在**同一域名下的其他打开的页面**中触发。这是浏览器的规范行为，不是 bug。
- 页面 A 执行
localStorage.setItem('theme', 'dark') - 页面 B（已打开且同源）会收到
storage事件，event.key === 'theme'，event.newValue === 'dark' - 页面 A 自身不会收到该事件
正确监听 storage 事件的方法
在每个需要响应的页面中，统一监听 window 上的 storage 事件：
window.addEventListener('storage', (e) => {
console.log('key:', e.key);
console.log('old:', e.oldValue);
console.log('new:', e.newValue);
console.log('url:', e.url); // 触发修改的页面地址
// 根据 key 做相应处理，比如刷新主题、同步状态等
});
注意：e.key 和 e.newValue 是最常用字段；e.oldValue 在清除项（removeItem 或设为 null）时为原值，e.newValue 为 null。
主动触发通知的补充方案（本页也要响应）
如果希望当前页面也能“感知”自己做的修改（比如用户切换主题后立即更新 UI），不能依赖 storage 事件，需手动触发逻辑：
- 封装一个
setStorage(key, value)函数，在调用localStorage.setItem()后，立即执行对应的业务逻辑（如updateTheme(value)） - 再广播自定义事件或调用回调，确保本页和他页行为一致
- 示例：
localStorage.setItem('token', 'abc'); updateAuthState('abc');，而不是等storage事件
注意事项与常见陷阱
实际使用中容易踩坑：
- 不同协议、端口、子域之间不共享
localStorage，也不会触发storage事件 - iFrame 中若同源，父页和子页可互相触发
storage事件 - 隐私模式或禁用 localStorage 时，事件不会发生，建议加 try/catch 和降级逻辑
- 事件对象中的
e.url是触发页的完整 URL，可用于区分来源（如忽略自身 iframe 发起的变更）
不复杂但容易忽略细节，关键在于理解事件触发边界，并配合手动逻辑覆盖本页响应。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
