window.onstorage事件只在其他同源标签页修改localstorage时触发，当前页修改不会收到；原因包括不同源、监听绑定过晚、使用sessionstorage、直接赋值绕过api等。
window.onstorage 事件只在其他同源标签页修改 localStorage 时触发，当前页改 localStorage 自己收不到 —— 这不是 bug，是设计使然。
为什么 window.addEventListener('storage', ...) 不生效？
常见现象：A 页面调用 localStorage.setItem('theme', 'dark')，B 页面绑了监听却没收到 event。
原因通常有这几个：
- 两个页面不同源（比如
http://localhost:3000和http://127.0.0.1:3000被视为不同源） - 监听器绑定太晚：B 页面还没执行
addEventListener，A 页面就已写入，事件直接丢失 - 用了
sessionStorage：它不跨标签页，sessionStorage.setItem()永远不会触发其他页的storage事件 - 直接赋值绕过 API：
localStorage.key = 'value'不会触发事件，必须用setItem()、removeItem()或clear()
如何正确监听 storage 变化并更新 UI？
典型场景：A 页面提交表单后存到 localStorage，B 页面实时显示该数据。
关键点在于「约定 key + 安全解析」：
- 不要监听所有 key，固定一个通信通道，比如统一用
'__ui_state'作为消息 key - value 必须是字符串，传对象要
JSON.stringify()，接收端要JSON.parse()并加 try/catch - 检查
event.url可选地过滤来源（比如只响应来自 /admin/ 下的变更）
示例代码：
window.addEventListener('storage', (e) => {
if (e.key !== '__ui_state') return;
try {
const data = JSON.parse(e.newValue);
document.getElementById('status').textContent = data.message;
} catch (err) {
console.warn('invalid __ui_state value', e.newValue);
}
});
localStorage.setItem() 后本页也要响应？自己补一手
storage 事件天生不通知触发者，但很多场景下本页也需要同步更新（比如切换主题后立即应用样式）。
别重写整个 localStorage 对象，简单可靠的做法是：
- 封装一个
safeSetItem(key, value)函数 - 内部先调用原生
localStorage.setItem() - 再手动派发一个自定义事件或调用本地更新逻辑
示例：
function safeSetItem(key, value) {
const strVal = typeof value === 'string' ? value : JSON.stringify(value);
localStorage.setItem(key, strVal);
// 主动通知本页
if (key === 'theme') {
document.body.classList.toggle('dark-mode', strVal === 'dark');
}
}
隐私模式、无痕窗口下 storage 事件可能完全失效
部分浏览器（如 Safari、Firefox 隐私模式）会禁用 localStorage 或每次关闭窗口就清空，导致：
-
setItem()抛错或静默失败 -
storage事件从不触发 - 监听器绑了也白绑
上线前务必在无痕窗口中实测。更稳妥的做法是加 fallback 判断：
try {
localStorage.setItem('__test__', '');
localStorage.removeItem('__test__');
} catch (e) {
console.warn('localStorage unavailable — skip storage-based sync');
// 切换到 BroadcastChannel 或轮询等备用方案
}
真正容易被忽略的不是语法，而是事件的“单向性”和“不可靠性”：它不保证送达，不提供确认，也不支持大 payload。一旦业务需要响应、重试或结构化消息，就得立刻转向 BroadcastChannel 或 SharedWorker。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
