标签页卸载前用sendBeacon同步表单快照

在网页表单填写过程中，用户意外关闭标签页或切换页面常导致数据丢失，而利用 `navigator.sendBeacon` 在卸载前发送表单快照，正是一个轻量却关键的“兜底防线”——它虽不保证100%送达，但通过防抖式内存快照、严格转为 Blob 发送、协同 `pagehide` 与 `visibilitychange` 事件提升捕获率，并配合服务端去重与容错处理，能显著提升用户体验与数据完整性；记住，它不是主同步通道，而是浏览器尽力而为的最后一根保险绳。

使用 navigator.sendBeacon 在页面卸载前同步表单进度是可行的，但“可靠”需满足几个关键前提：数据必须已序列化、请求体必须是 Blob 或 ArrayBuffer（不能是普通对象）、且不能依赖响应或重试逻辑。它本身不保证送达，只保证浏览器在后台尽力发出——这是它的设计本质。

确保数据在 unload 前已就绪并正确序列化

用户可能在关闭标签页瞬间仍在输入，所以不能只监听 beforeunload 时才收集数据。推荐做法是：

• 对表单字段做防抖式快照（例如每 1.5 秒保存一次到内存对象中），避免高频触发又不丢失最近修改
• 在 beforeunload 和 pagehide 事件中立即读取最新快照，转为 JSON 字符串，再封装成 Blob
• 不要在事件回调里执行异步操作（如 await fetch、Promise.resolve()），否则可能被中断

用 sendBeacon 发送，且只传 Blob（不传普通对象或 FormData）

sendBeacon 只接受二进制类型作为 body。常见错误是直接传 JSON.stringify(data)，这会失败或被静默忽略：

• ✅ 正确方式：new Blob([JSON.stringify(data)], { type: 'application/json' })
• ❌ 错误方式：JSON.stringify(data)、{ data }、new FormData()
• 发送路径建议用 POST 接口，后端以 raw body 解析（如 Express 中用 express.raw({ type: 'application/json' })）

补充 fallback：监听 pagehide + visibilitychange 提升捕获率

beforeunload 在部分场景（如 Android Chrome 切换 App）可能不触发，pagehide 更可靠；而用户最小化窗口、切到其他 tab 时，visibilitychange 可提前存一份快照：

• 监听 document.addEventListener('visibilitychange', ...)，当 document.hidden === true 时触发一次快照 + sendBeacon
• 同时绑定 window.addEventListener('pagehide', ...)，该事件在页面卸载前 100% 触发（包括安卓后台）
• 避免重复发送：用标志位 hasSentBeacon = true 防止多个事件叠加调用

服务端配合：接收快照并容忍重复/乱序

由于浏览器无法确认 beacon 是否送达，也不支持重试，服务端应：

• 对每个用户+表单 ID 存储最新快照（用 Redis 或数据库 upsert），不校验时间戳顺序
• 忽略空内容或明显损坏的 JSON（如解析失败、字段缺失严重）
• 可选：返回 HTTP 204（无响应体），避免前端误判为失败而尝试重发（beacon 本就不该等响应）

不复杂但容易忽略：beacon 的可靠性来自“尽力而为+无阻塞”，不是“强一致”。把它当作最后的快照保险绳，而非主同步通道。主保存仍应依赖用户主动提交或定时 save 按钮，beacon 是兜底手段。

到这里，我们也就讲完了《标签页卸载前用sendBeacon同步表单快照》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！