LocalStorage配合storage事件可实现同源多标签页轻量级实时同步，需严格同源、用setItem/removeItem触发、监听前先读取、数据需JSON序列化，并注意自身不触发、Safari无痕限制及高频写入抖动问题。
LocalStorage 本身不是通信工具，但它配合 storage 事件，就能让同源的多个标签页“感知彼此变化”，实现轻量级实时同步。关键不在于“推送”，而在于“写即广播、听即响应”——一个标签页改了值，其他同源标签页立刻收到通知。
同源是硬前提
只有协议、域名、端口三者完全一致的页面才共享同一份 localStorage。比如：
-
https://example.com/a和https://example.com/b✅ 可互通 -
https://example.com和http://example.com❌ 协议不同，隔离 -
https://a.example.com和https://b.example.com❌ 子域不同，不共享 -
https://localhost:3000和https://127.0.0.1:3000❌ 域名字面不同，不通
必须显式调用 setItem 或 removeItem
直接赋值（如 localStorage.theme = 'dark'）不会触发 storage 事件，其他标签页收不到。务必用标准 API：
- ✅
localStorage.setItem('theme', 'dark') - ✅
localStorage.removeItem('theme') - ✅
localStorage.clear() - ❌
localStorage.theme = 'dark'（无效）
监听时要“读+听”双保险
新打开的标签页不会收到历史变更，所以不能只靠监听。正确做法是：
立即学习“Java免费学习笔记（深入）”；
- 页面加载后，先主动读取：
const saved = localStorage.getItem('theme')，并立即应用（比如切主题） - 尽早绑定监听器，例如在 DOM ready 后或 React 的
useEffect(() => {...}, [])中 - 在事件回调里精准判断：
if (e.key === 'theme')，再用e.newValue更新 UI；注意e.newValue可能为null（比如调用了removeItem），需做空值处理
数据存取要序列化
localStorage 只支持字符串。存对象必须 JSON.stringify，取的时候必须 JSON.parse：
- ✅
localStorage.setItem('user', JSON.stringify({ id: 1, name: 'Alice' })) - ✅
const user = JSON.parse(localStorage.getItem('user') || '{}') - ❌ 直接存对象会变成
"[object Object]"，取出来无法还原 - ⚠️ 函数、
undefined、Symbol等无法被 JSON 序列化的值会被丢弃
注意几个常见坑
当前标签页修改 localStorage，自身不会触发 storage 事件（避免自循环）；Safari 无痕模式可能禁用 localStorage；高频写入（如输入框每敲一个字就存）会导致事件抖动甚至丢失——这类场景建议加防抖，或换用 BroadcastChannel。
