localstorage 多页面协作同步依赖同源共享存储与 storage 事件广播，适用于登录态联动、倒计时协同、购物车数量更新及多窗口3d场景状态同步，需注意防抖、清理残留和结构化数据存储。
localStorage 实现多页面协作数据同步，本质是利用同源下所有标签页共享存储空间 + storage 事件广播机制。它不依赖窗口引用、无需后端介入，轻量可靠，适合登录态、倒计时、购物车数量、表单草稿、主题切换等场景。
登录态自动同步与登出联动
用户在一个标签页点击“退出登录”，其他同源页面应立即跳转至登录页。关键在于用 localStorage 作为信号中转站：
- 登出页执行：
localStorage.setItem('authState', JSON.stringify({ logged: false, ts: Date.now() })) - 所有页面监听 storage 事件，当
event.key === 'authState'且JSON.parse(event.newValue).logged === false时，执行location.href = '/login' - 注意：登出页自身不会收到该事件，避免重复跳转；建议登出后调用
localStorage.removeItem('authState')清理残留
多标签页倒计时协同
例如限时优惠倒计时，多个页面需显示完全一致的剩余时间：
- 首个启动倒计时的页面写入绝对结束时间戳：
localStorage.setItem('countdownEnd', String(Date.now() + 60000)) - 所有页面统一用
requestAnimationFrame每帧读取该值，计算Math.max(0, endTime - Date.now())并渲染 - 新增控制键
countdownState（如'running'/'paused'），配合countdownEnd实现暂停/恢复/重置操作的跨页一致 - 新开标签页直接读取已有时间戳，无需重新初始化，天然保持同步
购物车数量实时广播
用户在商品页加购后，顶部导航栏购物车图标数字需在所有打开的页面中即时更新：
- 加购页触发：
localStorage.setItem('cartCount', JSON.stringify({ count: 5, timestamp: Date.now() })) - 各页面监听
cartCount键变更，解析event.newValue并刷新 UI 数字 - 为避免高频输入导致抖动（如搜索框实时存），可对写入加 100ms 防抖，或改用 BroadcastChannel 处理更密集场景
- 只存结构化数据，不传函数、undefined 或 DOM 节点
多窗口 3D 场景状态协同
像 multipleWindow3dScene 这类项目，多个浏览器窗口共同构成一个连贯 3D 空间：
- 每个窗口将自身位置、大小、旋转状态序列化后存入
localStorage.setItem('windows', JSON.stringify([...])) - 所有窗口监听
storage事件，一旦捕获key === 'windows'，就重新解析并同步渲染其他窗口的 3D 对象 - 关闭某个窗口时，通过
beforeunload触发清理逻辑，更新windows数组并写回 localStorage，确保其余窗口及时移除对应实体 - 借助
localStorage.getItem('count')统一维护窗口总数，辅助布局与资源分配
