用 localStorage 实现轻量本地成员状态同步：通过 clientID 存在线状态、storage 事件通知其他标签页、定时心跳+页面可见性维持准确性，并处理 Safari 无痕、缓存清理等边界情况。
用 localStorage 存在线状态、监听 storage 事件通知其他标签页、配合定时心跳和页面可见性判断，就能实现轻量可靠的本地成员状态同步。不依赖后端，适合小规模实时协作场景。
用 localStorage 统一存取成员在线状态
每个用户打开协作页面时，生成唯一 clientID（如用 crypto.randomUUID() 或时间戳+随机数），并以该 ID 为 key，把当前状态写入 localStorage：
- 上线：localStorage.setItem('online_abc123', JSON.stringify({ lastSeen: Date.now(), status: 'online' }))
- 离线（页面卸载前）：localStorage.removeItem('online_abc123')
- 状态更新（如切换为“离开中”）：覆盖写入新对象，保持 lastSeen 刷新
注意值必须是字符串，对象要 JSON.stringify；key 名带前缀（如 online_）可避免与其他业务键冲突。
监听 storage 事件动态更新成员列表
所有协作页面都需绑定 window.storage 监听器，但只响应与在线状态相关的 key 变化：
- 监听 event.key 是否匹配 /^online_/ 正则，过滤无关变更
- 读取 event.newValue 解析为对象，结合 lastSeen 判断是否“仍在线”（例如：Date.now() - lastSeen
- 若 event.oldValue 为空、newValue 有值 → 新成员上线；反之 → 成员下线；两者都有 → 状态更新
- 触发 UI 重绘：增删 DOM 节点、更新头像旁的在线指示器（绿色/灰色圆点）
记住：当前页面自己调用 setItem 不会触发本页的 storage 事件，所以状态变更后，本页 UI 需手动同步（如调用 updateUI()），再写入存储。
用页面可见性 + 定时心跳维持状态准确性
仅靠用户打开/关闭标签页不可靠——页面可能被挂起、切到后台、或浏览器休眠。需主动维护：
- 页面可见时（document.visibilityState === 'visible'），每 25 秒调用一次 heartbeat()，更新对应 key 的 lastSeen
- 页面隐藏时暂停心跳，但不清空状态（防止误判离线）
- 页面重新可见时立即补发一次心跳，并检查其他成员 lastSeen，清理超时条目（如 >60 秒未更新）
- 用 requestIdleCallback 或 setTimeout 延迟执行清理，避免阻塞主线程
处理边界情况提升鲁棒性
真实环境存在 Safari 无痕模式禁用 localStorage、用户手动清缓存、多设备登录等干扰：
- 写入前 try/catch，捕获 QuotaExceededError 或 SecurityError，降级为内存缓存（仅本页有效）
- 首次加载时，扫描所有 online_* key，合并生成初始成员列表，再启动监听
- 对同一用户多开标签页，用 sessionStorage 存 clientID 副本，避免重复注册；关闭时只删 sessionStorage，由主标签页统一管理 localStorage
- 不存敏感字段（如用户名、邮箱），只存匿名 ID 和状态；如需展示昵称，由主应用通过 context 或 API 按需拉取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
