storage事件能跨标签页工作，是因为同源（协议+域名+端口一致）下所有标签页共享同一localstorage实例，当某页调用setitem()或removeitem()且值实际变化时，浏览器会向其他同源已打开页面广播storage事件，当前页不触发以避免自循环；事件对象含key、oldvalue、newvalue等字段，支持精准响应，但需手动初始化状态并注意隐私模式、值未变不触发等限制。
localStorage 本身不“同步”，而是同源所有标签页共用同一份存储空间；真正实现跨页响应的，是 storage 事件 —— 它在其他同源页面中自动触发，通知它们数据已变。
为什么 storage 事件能跨标签页工作
浏览器规定：只要协议、域名、端口完全一致（即同源），所有打开的标签页就共享同一个 localStorage 实例。当某一页调用 setItem() 或 removeItem()，只要值实际变化，浏览器就会向其他所有同源已打开页面广播一个 storage 事件。当前页自身不会收到该事件，避免自循环。
- 事件对象包含
key、oldValue、newValue、url等字段，可精准判断改了什么 - sessionStorage 不适用——它每个标签页独立，修改不会触发其他页的 storage 事件
- 直接赋值如
localStorage.x = 'y'不会触发事件，必须用标准 API
必须同时做两件事：初始化 + 监听
新打开的标签页不会收到历史变更事件，所以只监听不够——必须先读取当前值，再监听后续变化。
- 页面加载时立即读取：
const theme = localStorage.getItem('theme') || 'light' - 立刻应用该状态（比如设置 class 或 data-theme 属性）
- 再绑定监听器：
window.addEventListener('storage', handleThemeChange) - 监听函数内检查
e.key === 'theme'，再用e.newValue更新 UI
避免常见失效场景
看似简单，但几个细节没处理好，就会收不到事件或状态错乱。
- 值未变时不触发：设成相同字符串可能被浏览器跳过，可用时间戳兜底：
localStorage.setItem('sync-flag', Date.now()) - 监听器绑定太晚：必须在页面早期（如 script 标签内或 DOMContentLoaded 前）注册，否则错过首条消息
- 隐私模式限制：Safari 无痕窗口可能禁用 localStorage 或不派发 storage 事件
- 跨子域/跨端口即不同源：a.example.com 和 b.example.com 无法通信，localhost:3000 和 localhost:8080 也不行
适合做什么，不适合做什么
storage 事件不是消息总线，它是轻量级状态通知机制。
- 适合：主题切换、登录态刷新、表单草稿提示、开关同步、购物车数量更新
- 不适合：传输大对象（受 localStorage 容量和序列化影响）、要求确认送达的指令、实时协同编辑、跨域通信
- 若需更强能力，可升级为 SharedWorker（同源多页共享线程）或配合 WebSocket 使用
