HTML文本域本身不支持多端同步，但可通过localStorage+服务端中转、BroadcastChannel实现同源多标签页同步、IndexedDB+WebSocket实现离线优先协同三种方案达成草稿实时同步效果。
HTML文本域本身不支持多端同步，但结合浏览器存储机制和跨设备通信方案，可以实现类似“草稿箱”的实时同步效果。核心思路是：用户输入时自动保存到持久化存储，再通过服务端或广播机制将变更推送到其他已登录终端。
用 localStorage + 服务端中转实现基础草稿同步
这是最常用且兼容性好的方式，适合大多数 Web 应用：
- 每次用户在 <textarea> 中输入（监听
input事件），立即将当前值连同用户 ID、表单标识（如formId）一起加密后存入localStorage - 同时向后端 API（如
/api/draft/save）发送异步请求，把草稿内容、时间戳、设备信息一并提交并落库 - 当用户在另一台设备打开同一页面时，页面加载后立即调用
/api/draft/latest?userId=xxx&formId=yyy拉取最新草稿，并填充到 <textarea> 中 - 为避免覆盖，服务端可记录最后编辑时间，前端比对本地时间戳与服务端返回时间，只在服务端更新更晚时才自动还原
用 BroadcastChannel 实现同源多标签页实时同步
如果目标是同一浏览器多个标签页之间的即时联动（比如写一半切去查资料，回来继续），无需后端参与：
- 创建一个统一频道，例如
const channel = new BroadcastChannel('draft-sync') - 监听
textarea的input事件，触发时调用channel.postMessage({ formId: 'contact', value: textarea.value }) - 所有同源标签页都监听该频道的
message事件，收到后判断formId是否匹配，匹配则更新本地 <textarea> 的value属性 - 注意加防抖（如 300ms 延迟发送），避免高频输入造成消息风暴；也需判断是否是自己发出的消息，防止循环更新
用 IndexedDB + WebSocket 实现离线优先的多端协同
适用于对可靠性要求高、常有弱网或离线场景的产品（如笔记类 App）：
立即学习“前端免费学习笔记（深入）”；
- 用户输入时，先写入
IndexedDB（本地数据库），再尝试通过WebSocket推送到服务端 - 若推送失败，标记该草稿为“待同步”，并在网络恢复后重试；服务端收到后广播给该用户所有在线设备
- 每条草稿带唯一
revisionId和timestamp，多端编辑冲突时按时间戳合并，或提示“他人已修改，是否保留当前版本？” - <textarea> 本身不感知同步逻辑，只作为视图层；所有数据流经统一状态管理模块（如自定义 Hook 或 Store）
注意事项与体验优化
同步功能容易忽略但影响体验的关键点：
- 不要在
input事件里直接调用fetch频繁上传——改用节流 + 变更检测（只在内容真正变化时才触发） - 用户切换页面或关闭标签前，用
beforeunload事件兜底保存一次，防止意外丢失 - 在 <textarea> 旁显示“已保存”、“同步中…”、“离线缓存”等轻量状态提示，增强确定感
- 移动端 Safari 对
BroadcastChannel支持有限，多端同步必须依赖服务端中转，不能仅靠前端 API
