HTML5 WebStorage 的 storage 事件仅通知同源其他页面，不触发当前页；需初始化读取+事件监听+本页手动同步三者结合，且须满足同源、显式API调用、仅localStorage有效等条件。
HTML5 WebStorage 的 storage 事件是浏览器原生支持的跨标签页通信机制，但它只通知“其他同源页面”，**不通知当前页自身修改**。要真正监听并响应跨页修改，必须同时做好三件事：页面加载时主动读取初始值、尽早注册 storage 监听器、并在本页写入后手动同步 UI。
确保触发条件全部满足
storage 事件不会凭空发生，必须同时满足：
-
严格同源：协议、域名、端口三者完全一致（例如
https://example.com和http://example.com视为不同源；localhost:3000和127.0.0.1:3000也不互通） -
显式调用 API：只能通过
localStorage.setItem()、removeItem()或clear()触发；直接赋值如localStorage.theme = 'dark'完全无效 - 仅限 localStorage：sessionStorage 修改不会跨页广播，只在当前页或 iframe 内生效
监听 + 初始化双保险
新打开的页面收不到历史变更，所以不能只靠监听——必须“拉取 + 监听”一起做：
- 页面加载后立即读取：例如
const theme = localStorage.getItem('theme') || 'light'，然后应用到 DOM（如设置document.documentElement.setAttribute('data-theme', theme)） - 在
DOMContentLoaded或框架挂载钩子中注册监听：window.addEventListener('storage', handleStorage) - 监听函数中先校验 key：
if (e.key === 'theme')，再处理e.newValue（注意它可能是null，比如调用了removeItem）
本页状态必须手动同步
你在 A 页面点击切换主题，执行 setItem 后，A 页面自己不会收到 storage 事件——UI 不会自动更新。必须在写入后立刻执行本地刷新：
立即学习“前端免费学习笔记（深入）”；
- 用户操作后，先写入：
localStorage.setItem('theme', 'dark') - 紧接着调用本地应用函数：
applyTheme('dark')，更新 class、CSS 变量、DOM 样式等 - 其他页面则靠 storage 事件收到通知后自动响应，无需重复写入逻辑
避免常见陷阱
真实项目中容易忽略但影响体验的关键点：
-
不要循环写入：不在 storage 回调里再次调用
setItem('theme', ...)，否则可能引发 A→B→A 的跨页无限循环 -
兼容隐私模式：Safari 无痕、部分 WebView 可能禁用 localStorage；要用
try/catch检测可用性，必要时降级为内存变量或轮询 -
统一存 JSON 对象：用单个 key（如
'userPreferences'）存整个配置对象，比拆成多个键更可靠；读写都是一次原子操作，升级新增字段也方便 -
注意 document.domain：若手动设置了
document.domain，storage 事件会完全失效，此时需换用postMessage等替代方案
