storage事件仅在同源其他标签页修改localStorage时触发，当前页修改不触发；需手动初始化状态并监听事件实现同步，注意同源限制、Safari隐私模式兼容性及字符串序列化处理。
用 storage 事件监听其他页面对 LocalStorage 的修改，是浏览器原生支持的机制，但必须清楚它的触发边界：它只在“同源的其他标签页”修改数据时触发，当前页自己改不会收到通知。
storage 事件的基本用法
在每个需要同步的页面中注册监听即可：
- 调用
window.addEventListener('storage', handler) -
handler接收一个StorageEvent对象，包含key、oldValue、newValue、url（修改来源页地址）等字段 - 只响应字符串值实际变化的情况——重复设置相同字符串，多数浏览器不触发事件
必须手动初始化当前页状态
storage 事件不会在页面加载时自动触发，哪怕 LocalStorage 已有数据。所以不能只靠监听，还要主动读取：
- 页面启动时，用
localStorage.getItem('theme')或类似方式初始化 UI 或状态变量 - 后续靠 storage 事件更新其他标签页的状态，形成“初始化 + 增量同步”闭环
- 例如主题切换：A 标签页设
localStorage.setItem('theme', 'dark')→ B 标签页收到事件 → 读取新值并切主题
关键限制与兼容性注意点
实际落地时容易忽略这些细节，导致同步失效：
立即学习“Java免费学习笔记（深入）”；
-
同源要求严格：协议、域名、端口三者完全一致才算同源；
http://a.com和https://a.com不互通 -
Safari 隐私模式下不可用：无痕窗口可能禁用 LocalStorage，
newValue可能为null，建议加try/catch并 fallback 到内存状态 - iframe 场景需同源：父页与 iframe 若同源，storage 事件可跨 frame 传播；否则静默失败
-
值必须是字符串：存对象要
JSON.stringify()，读取要JSON.parse()，且必须包裹try/catch防解析失败
简单可用的监听片段
直接复制就能用，带基础容错：
window.addEventListener('storage', (e) => {
if (e.key !== 'userToken') return;
try {
const newToken = e.newValue ? JSON.parse(e.newValue) : null;
// 触发登录态刷新、权限重校验等逻辑
updateAuthState(newToken);
} catch (err) {
console.warn('解析 userToken 失败:', err);
}
});
