storage事件仅监听同源其他标签页的localStorage变更，当前页修改不触发；需同源、值变更、尽早注册监听器，并主动getItem获取最新值，适合弱一致性场景。
storage 事件能监听其他同源标签页的 localStorage 修改，但当前页自己改不会触发 —— 这不是 bug，是浏览器设计如此。
storage 事件只在其他标签页触发，当前页修改完全不触发
这是最容易误判的一点。比如你在页面 A 执行 localStorage.setItem('theme', 'dark')，页面 B 会收到 storage 事件，但页面 A 自己收不到。很多开发者写完监听器发现“没反应”，其实是误以为自己改了就能触发。
- 触发条件必须是：同源（协议+域名+端口完全一致）的其他已打开标签页或窗口调用了
setItem()、removeItem()或clear() - 如果值没变（比如重复设
setItem('x', '1')两次），事件也不会触发 - 隐身窗口与普通窗口视为不同源，互相不触发
- 页面内通过开发者工具手动删 key，多数浏览器会触发，但旧版 Safari 可能静默失败
监听时必须手动初始化状态，不能只靠 event.newValue
event.newValue 不可靠：删除时它是 null，清空时 event.key 是 null，IE9 中立即读取可能拿到旧值。稳妥做法是监听后主动用 getItem() 拿最新值。
- 先判断
e.key === 'your-key'，再执行localStorage.getItem('your-key') - 不要依赖
e.oldValue做逻辑分支，它在首次 set 时为null，且无法区分“首次写入”和“删后重写” - 页面加载时必须主动读一次 localStorage 初始化 UI，storage 事件只管“后续变更”
addEventListener 必须尽早注册，否则会漏掉早期修改
如果监听器挂载太晚（比如等 DOMContentLoaded 后才加），而其他标签页在页面加载过程中已修改过 localStorage，这个事件就永远丢失了。
立即学习“前端免费学习笔记（深入）”；
- 最佳实践：把
window.addEventListener('storage', handler)放在最外层<script>标签里，不包裹任何异步或生命周期钩子 - Vue/React 组件中注册时，务必在
onMounted或useEffect(() => { ... }, [])的同步阶段注册，避免延迟 - 每次注册都要保存 handler 引用，组件卸载前用
removeEventListener('storage', handler)清理，否则可能重复执行
跨标签页通信适合弱一致性场景，不适合强同步逻辑
storage 事件不是实时总线：页面休眠、低性能设备、后台标签页节流都可能导致延迟数秒甚至更久；也不保证顺序，多个并发修改可能乱序到达。
- 适合做 UI 刷新、缓存失效、登录态提示这类“最终一致”操作
- 不适合协同编辑、实时计数器、事务性状态同步等强一致性需求
- 若需双向响应（比如 A 改了通知 B，B 改了也通知 A），要加防循环标记，例如写入前检查
newValue是否与当前值一致，避免无意义重写
真正容易被忽略的是：你永远无法用 storage 事件感知“自己刚写的值”，所有本页逻辑必须绕开这个限制 —— 要么封装写操作，要么用 Proxy 代理，要么接受“本页写 + 其他页读”这种单向模型。
