用 localStorage + 时间戳可实现跨标签页状态同步，需监听 storage 事件、写入时存值与时间戳、用 Math.max 防抖，并 try/catch Safari 无痕模式异常。
怎么用 localStorage + 时间戳实现跨标签页同步状态
浏览器里没有真正的“全局状态”，localStorage 是唯一能被同源所有标签页读写的持久化存储。但它不触发事件，得自己监听变化。
- 必须用
window.addEventListener('storage', handler)监听其他标签页的写入，不能只靠轮询 - 写入时务必同时存状态值和时间戳，比如：
localStorage.setItem('syncState', JSON.stringify({ value: 'online', updatedAt: Date.now() })) - 不同标签页可能因执行时机差异，导致时间戳错乱——建议写入前先读一次，用
Math.max(现有时间戳, 当前时间戳)做防抖 - 注意 Safari 无痕模式下
localStorage会抛QuotaExceededError，需 try/catch 包裹
为什么 sessionStorage 不适合多设备同步
sessionStorage 的生命周期绑定单个标签页，关闭即清空，且完全不共享。它连同标签页都做不到同步，更别说跨设备。
- 多设备场景下，
sessionStorage的数据根本不会离开当前设备内存，服务器、PWA、Service Worker 都无法访问 - 有人误用
sessionStorage存 token 试图“保活”，结果换台手机登录就失效——这是设计使然，不是 bug - 若真需要短期设备本地状态（如表单草稿），可用
localStorage加过期时间字段，手动清理
怎么让手机和桌面端显示“最后同步时间”
真正跨设备的时间同步，必须走服务端中转。前端只能展示“我上次上报的时间”，而非“对方设备实际更新时间”。
- 每次状态变更，前端调用 API 上报，服务端记录
last_sync_at并返回统一时间戳（避免客户端时钟不准） - 前端定时拉取（比如每 30 秒）
/api/sync/status，响应体含{ lastSyncAt: "2024-05-22T14:30:22.123Z" } - 显示时用
Intl.DateTimeFormat格式化，别直接new Date().toString()——中文用户看到英文月份会懵 - 如果用户离线，本地缓存最后一次成功同步的时间，并加标记
isStale: true，UI 上灰显+提示“未联网，状态可能滞后”
WebSocket 能替代轮询做实时同步吗
可以，但仅限在线设备；断网重连后，你仍需兜底拉一次服务端最新状态，否则会丢变更。
立即学习“前端免费学习笔记（深入）”；
- WebSocket 只负责推送“有更新”，不保证消息不丢失——连接中断期间的状态变更，服务端不会补发
- 推荐组合策略：WebSocket 推送变更通知 → 前端收到后立即发
GET /api/sync/latest拉全量状态 - 别在 WebSocket 消息里塞完整状态对象，容易超帧长限制；只传
syncId或version，再按需拉取 - 移动端后台时 WebSocket 会被系统挂起，iOS 尤其明显，此时降级为定时拉取是必须的
跨设备时间对齐最麻烦的不是技术实现，而是用户预期管理——他看到“最后同步：2 分钟前”，其实那只是你这台设备上次成功通信的时间，不代表另一台设备此刻已更新。这个 gap 必须在 UI 层诚实表达，而不是藏在逻辑里等用户投诉。
