LocalStorage 本身不支持直接监听变化，但可通过 storage 事件实现多标签页状态同步：该事件仅在同源的其他标签页中触发，需手动初始化并配合中心化状态管理，注意同源限制、字符串存储、隐私模式降级等陷阱。
LocalStorage 本身不支持直接监听变化，但浏览器提供了 storage 事件，可在**其他标签页修改 LocalStorage 时**触发，从而实现多标签页间的状态同步。
storage 事件只在非当前标签页触发
这是关键前提：当你在当前页面调用 localStorage.setItem()，不会触发本页的 storage 事件；它只会在同一源（origin）下的其他打开的标签页或窗口中触发。因此，它天然适合“跨标签页通知”场景。
- 监听写法简单：
window.addEventListener('storage', handler) - handler 回调接收一个
StorageEvent对象，含key、oldValue、newValue、url（触发变更的页面地址）等字段 - 注意：如果值没变（例如重复设置相同字符串），部分浏览器可能不触发事件
典型同步逻辑：统一状态 + 触发更新
单纯监听 storage 事件只是“收到通知”，要真正同步 UI 或业务状态，需配合一个中心化的状态管理方式：
- 所有标签页都从 LocalStorage 初始化状态（如
const theme = localStorage.getItem('theme') || 'light'） - 任一标签页修改后（如切换主题），调用
localStorage.setItem('theme', 'dark') - 其他标签页的
storage事件监听器捕获到变更，读取新值并更新自身 UI 或状态变量 - 推荐封装一个
useStorageSync（React）或syncFromStorage工具函数，避免重复逻辑
常见陷阱与注意事项
实际使用中容易踩坑，需特别留意：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
立即学习“Java免费学习笔记（深入）”；
-
同源限制：只有同协议、域名、端口的页面才能互相监听，
http://a.com和https://a.com不互通 - iframe 场景：父页面和 iframe 若同源，storage 事件可跨 frame 传播；否则无效
- 初始值问题：页面加载时 LocalStorage 的值不会触发 storage 事件，必须手动初始化
-
值类型限制：LocalStorage 只存字符串，存对象需
JSON.stringify()，读取时需JSON.parse()并加 try-catch - 隐私模式/禁用情况：Safari 无痕模式默认禁用 LocalStorage，事件也不会触发，建议降级处理（如 fallback 到内存状态）
简单示例：监听主题变更
以下是一个轻量实用的监听片段：
function onThemeChange(newTheme) {
document.documentElement.setAttribute('data-theme', newTheme);
// 更新 React state / Vue ref / 其他响应式数据
}
// 初始化
const savedTheme = localStorage.getItem('theme') || 'light';
onThemeChange(savedTheme);
// 监听其他标签页变更
window.addEventListener('storage', (e) => {
if (e.key === 'theme') {
const newTheme = e.newValue || 'light';
onThemeChange(newTheme);
}
});
只要任一标签页执行 localStorage.setItem('theme', 'dark')，其余标签页就会自动响应。
