Web Storage 的 storage 事件仅广播跨页变更，不触发当前页自身修改；需手动同步本页 UI 并统一用单 key 存 JSON 对象，注意 Safari 无痕模式、document.domain 等兼容性陷阱。
Web Storage 的 storage 事件是浏览器原生支持的跨标签页通信机制，但它不通知当前页自身变更，只向同源其他已打开的页面广播 localStorage 修改。要真正实现“监听 + 同步”，必须同时处理本页即时响应和跨页状态更新两件事。
必须满足同源且显式调用
storage 事件生效有硬性前提：
- 协议、域名、端口三者完全一致（例如 https://example.com:8080 和 http://example.com:8080 视为不同源）
- 只能通过 localStorage.setItem()、removeItem() 或 clear() 触发；直接赋值如
localStorage.theme = 'dark'不会派发事件 - sessionStorage 的修改不会跨标签页广播，仅限当前页或 iframe 内部
监听必须尽早注册，且需手动同步本页 UI
当前页写入后不会收到自己的 storage 事件，因此 UI 更新不能依赖监听——必须写完立刻执行：
- 在 DOMContentLoaded 或脚本最顶部立即绑定监听器，避免错过其他页面已发生的变更
- 调用
setItem后，同步更新本地 DOM 或状态（例如切换主题类名、重绘编辑器配置） - 监听回调中只负责刷新其他页面的视图，例如：
if (e.key === 'userPreferences') { applyEditorPreferences(JSON.parse(e.newValue)); }
统一存取结构，避免多 key 竞态
用单个 key 存整个配置对象（如 'userPreferences'），比拆成 'theme'、'fontSize' 等多个键更可靠：
- 写入/读取是一次原子操作，防止部分字段更新失败导致状态错乱
- 新增字段（如加
"wordWrap": true）只需改 JSON 结构，无需增删 key - 清空时调用
removeItem('userPreferences')即可，不留残留 - 务必用
JSON.stringify()存、JSON.parse()取，并包裹 try-catch 处理解析失败
注意边界情况与兼容性陷阱
真实场景中容易忽略但影响体验的关键点：
- Safari 无痕模式可能禁用 localStorage，需用 try/catch 检测可用性并降级（如 fallback 到内存变量）
- 设置
document.domain会导致 storage 事件完全失效，此时只能换用 postMessage + 轮询等替代方案 -
e.newValue在删除或首次写入时为null，UI 更新逻辑需做空值判断 - 不要在监听器里再次写入同一 key，否则可能引发 A→B→A 的无限循环
