localstorage通过同源共享和storage事件实现跨页面数据同步，写入触发其他同源页事件监听，适用于登录态、主题切换等轻量同步，需json序列化、防重复写入、及时清理临时键。
localStorage 能实现跨页面数据同步，关键在于它同源共享 + storage 事件机制。一个标签页写入，其他同源标签页立刻感知变更，适合登录态、主题切换、表单草稿等轻量状态同步，但不适合高频或复杂数据传输。
基础通信：写即广播，听即响应
同源（协议+域名+端口一致）下所有标签页共用同一份 localStorage。当某页调用 setItem() 或 removeItem() 时，其余同源页面会触发 storage 事件——当前页自身不触发，避免自循环。
- 发送方只需写入：例如
localStorage.setItem('userStatus', JSON.stringify({ logged: false })) - 接收方监听事件：
window.addEventListener('storage', e => { if (e.key === 'userStatus') { /* 处理逻辑 */ } }) - 务必用 JSON.stringify 存、JSON.parse 取，否则对象会变成 "[object Object]"
状态同步：如购物车数量、待办列表刷新
适用于用户在任一页面操作后，其他页面自动更新 UI 的场景。例如新增任务，所有打开的待办页同步刷新。
- 操作页写入变更标识：
localStorage.setItem('todo-change', Date.now().toString()) - 各待办页监听该 key，收到后重新拉取数据或触发本地更新
- 建议写入带时间戳或随机值，确保每次修改都能可靠触发事件（部分浏览器对相同值重复写入可能忽略）
模拟 sessionStorage 跨标签共享
利用 localStorage 做“中转站”，让新打开的标签页获取已有标签页的 session 数据，实现登录态自动同步。
- 新标签页检测：
if (!sessionStorage.length) localStorage.setItem('getSessionStorage', '1') - 已有标签页响应：
if (e.key === 'getSessionStorage') localStorage.setItem('sessionData', JSON.stringify(sessionStorage)) - 新标签页接收：
if (e.key === 'sessionData' && !sessionStorage.length) { Object.keys(JSON.parse(e.newValue)).forEach(k => sessionStorage.setItem(k, JSON.parse(e.newValue)[k])) } - 注意及时 removeItem 清理临时键，防止误触发
工程化封装：Vue 中复用监听逻辑
直接在每个组件写事件监听易出错且难维护。推荐封装为组合式函数，桥接 storage 事件与响应式系统。
- 创建
useLocalStorageWatcher(key)，内部注册/卸载 storage 监听器 - 将
e.newValue解析后同步到 ref，再通过watch响应变化 - 自动处理 null、解析失败等边界情况，返回可被 watch 的响应式值
- 避免跨子域误用：a.example.com 和 b.example.com 视为不同源，无法通信
