用 window.onpagehide 替代 beforeunload/unload 是解决移动端退出存盘失败的核心方案，仅当 event.persisted === false 时保存，配合 sendbeacon 和 freeze 事件，并服务端落库实现跨设备连续性。
用 window.onpagehide 替代 beforeunload 或 unload，是解决移动端（尤其 iOS Safari 和 Android Chrome）退出存盘失败的核心方案。关键不在“监听”，而在“判别时机”——只有当页面真正要消失、无法恢复时，才执行保存；若只是暂存进 bfcache（如按返回键），则跳过冗余操作。
只在真正卸载时保存，避开 bfcache 误触发
移动端浏览器普遍启用 back/forward cache（bfcache），用户点返回或切 Tab 时，页面不是销毁而是冻结。此时 pagehide 会触发，但 event.persisted === true，表示它将被缓存，后续 pageshow 可毫秒级恢复。你不需要也不该在此时保存状态——否则每次返回都覆盖一次，还可能把中间态错误写入。
- ✅ 正确做法：仅当
event.persisted === false时调用保存逻辑（如发 Beacon、提交草稿、记录停留时长） - ❌ 错误做法：无条件在
pagehide回调里执行localStorage.setItem或fetch - 补充判断：可叠加
document.visibilityState === 'hidden'，避免 App 切后台等伪离开场景干扰
用 sendBeacon 替代 fetch/AJAX，确保数据发出
pagehide 触发后，JS 执行环境随时可能被冻结（尤其是 iOS Safari），异步请求大概率被中止。同步 AJAX 虽能堵住这个漏洞，但会阻塞页面卸载、引发白屏甚至卡死，已不被推荐。
- ✅ 推荐方式：使用
navigator.sendBeacon(url, data)，它是专为这种场景设计的异步、不可取消、低开销 API - ⚠️ 注意事项：payload 必须是
ArrayBuffer、Blob或URLSearchParams，不能直接传 JSON 字符串；建议先JSON.stringify再转成Uint8Array或new Blob([jsonStr]) - ? 小技巧：关键字段精简（如只传
id、timestamp、progress），控制 payload 在 64KB 内，提升成功率
与 freeze 事件配合，捕获更早的失活信号
iOS Safari 和新版 Chrome 会在 pagehide 前触发 freeze 事件——这是 JS 执行被暂停的确切信号，比 pagehide 更早、更可靠。
- ✅ 建议双监听：
freeze中立即保存状态并标记frozen = true；pagehide中检查!frozen && !event.persisted，作为兜底补救 - ⚠️ 不要依赖
setTimeout或Promise.then延迟保存——这些微任务在冻结后不会执行 - ? 避免调用
alert、confirm、window.open等 UI 阻塞 API，它们在pagehide或freeze中静默失效
服务端存盘 + 客户端恢复，实现跨设备连续性
单纯依赖 localStorage 无法解决用户换手机、清缓存或用微信内置浏览器打开等场景。真正的稳健，是把状态落库，再通过唯一标识（如用户 ID + 会话 key）读取。
- ✅ 保存时：带上业务上下文（如题目 ID、倒计时剩余秒数、当前步骤），POST 到后端接口，由服务端写入用户专属记录
- ✅ 恢复时：页面加载完成（
DOMContentLoaded或 VueonMounted）后，主动拉取最新状态，而非等待pageshow - ? 提示：若需支持离线存盘，可用
IndexedDB做本地缓存层，上线后自动同步到服务端
