storage事件仅在同源其他页面触发，不触发当前页；监听时需手动初始化状态，适用于弱一致性场景如UI刷新，不适合强同步逻辑。
storage 事件是浏览器原生提供的、用于监听同一源（origin）下其他标签页或窗口对 localStorage 修改的机制。它**不会在触发修改的当前页面触发**，只在**其他同源的打开页面中触发**，这是关键前提。
storage 事件的基本原理
当某个标签页执行 localStorage.setItem()、removeItem() 或 clear() 时，只要操作成功且数据实际发生变化（例如设为相同值不会触发），浏览器就会向**该源下所有其他已打开的窗口/标签页**（不包括当前页）派发一个 storage 事件。
注意：
- 同一标签页内修改 localStorage 不会触发自身的 storage 事件；
- 隐私模式、iframe 跨域、不同协议/端口/子域名均视为不同源，无法监听；
- Safari 在无痕模式下可能完全禁用 storage 事件。
监听 storage 事件的标准写法
在需要响应数据变更的页面中，使用 window.addEventListener('storage', handler) 即可：
window.addEventListener('storage', (e) => {
console.log('key:', e.key); // 被修改的键名，删除时为 null
console.log('oldValue:', e.oldValue); // 修改前的值，首次 set 时为 null
console.log('newValue:', e.newValue); // 修改后的新值，remove 时为 null
console.log('url:', e.url); // 触发修改的页面 URL
console.log('storageArea:', e.storageArea); // 指向触发页的 localStorage 对象（只读）
});
常见陷阱与实用建议
- 不要依赖 storage 事件同步状态：它不保证实时（尤其在低性能设备或页面休眠时可能延迟），也不保证顺序。适合做 UI 刷新、缓存失效等弱一致性场景，不适合强同步逻辑（如协同编辑）。
-
避免循环触发：若监听后又调用
localStorage.setItem()，当前页不会触发自身事件，但会触发其他页 —— 如果其他页也做同样操作，可能形成跨页循环。建议加标记（如临时 key）或比对 newValue 再决定是否写入。 - 初始化需手动处理：storage 事件只响应变更，不提供当前值。页面加载时应主动读取 localStorage 初始化状态，再监听后续变更。
- 兼容性足够好：Chrome 4+、Firefox 3.5+、Safari 4+、Edge 12+ 均支持，无需 polyfill。
一个轻量跨页通信示例
比如实现“多标签页共享登录态”：
- 登录页写入
localStorage.setItem('authToken', token)； - 其他已打开的业务页监听到
e.key === 'authToken'且e.newValue存在，就更新顶部栏用户信息； - 退出登录页调用
localStorage.removeItem('authToken')，其他页监听到e.key === 'authToken'且e.newValue === null，就跳转登录页。
不复杂但容易忽略细节。
