Page Lifecycle API无法捕获自动回收瞬间，只能通过freeze、visibilitychange等事件主动保存用户输入状态，并在恢复时还原；需组合监听、注意兼容性及DOM操作时机。
Page Lifecycle API 本身不提供“自动回收瞬间”的捕获能力——它只暴露页面可见性、聚焦、冻结、卸载等生命周期状态，而浏览器真正的内存回收（GC）是底层行为，不可直接监听或精确触发。所谓“捕捉自动回收瞬间”是个常见误解，实际能做的，是**在页面濒临被冻结或终止前，主动保存关键用户输入状态，并在恢复时还原**。
下面分几个真实可落地的场景说明怎么做、为什么、以及容易掉坑的地方。
监听 freeze 和 visibilitychange 事件做输入快照
当标签页被切换到后台、或系统资源紧张时，Chrome/Edge 会触发 freeze 事件（Firefox 不支持，需降级 fallback）；同时 visibilitychange 更通用，适合捕获用户切走的时刻。
-
freeze是最接近“即将被回收”的信号，但仅在支持该 API 的浏览器中触发（Edge 110+、Chrome 120+），且不保证 GC 立即发生 - 不要只依赖
pagehide：它在页面卸载时才触发，此时 DOM 已不可读，无法安全提取表单值 - 推荐组合监听：
visibilitychange+freeze+beforeunload（仅作兜底），并在每个 handler 中调用统一的saveUserInput()
示例：
function saveUserInput() {
const inputs = document.querySelectorAll('input, textarea, select');
const state = {};
inputs.forEach(el => {
if (el.name) state[el.name] = el.value;
});
localStorage.setItem('user-input-snapshot', JSON.stringify(state));
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) saveUserInput();
});
document.addEventListener('freeze', saveUserInput);
利用 resume 事件还原输入（注意兼容性断层）
resume 是 freeze 的反向事件，表示页面从冻结态恢复。但它在当前 Edge/Chrome 中仍为实验性功能（需开启 flag 或仅限某些版本），**不能当作稳定入口**。
- 更可靠的做法是：在页面
DOMContentLoaded后立即检查localStorage是否有快照，并还原；再清空 key 防止重复还原 - 还原时注意字段存在性校验，避免
el.value = undefined导致清空已有内容 - 如果用了框架（如 React/Vue），别直接操作 DOM 值，应更新对应 state 并触发 re-render
还原逻辑示例：
function restoreUserInput() {
const snapshot = localStorage.getItem('user-input-snapshot');
if (!snapshot) return;
try {
const state = JSON.parse(snapshot);
Object.entries(state).forEach(([name, value]) => {
const el = document.querySelector(`[name="${name}"]`);
if (el && el.value !== value) el.value = value;
});
} catch (e) {
// JSON 解析失败，忽略
}
localStorage.removeItem('user-input-snapshot');
}
document.addEventListener('DOMContentLoaded', restoreUserInput);
避免在 unload 里做异步保存
beforeunload 和 unload 的执行窗口极短（通常 await。
- 所有保存动作必须是同步的：只用
localStorage.setItem或sessionStorage.setItem - 不要写
await fetch('/save')或indexedDB.put(...)—— 它们大概率被中断，数据丢失 - 若需持久化到服务端，应在用户主动提交、或页面活跃时通过心跳机制定期同步，而非押注 unload 时机
真正影响自愈效果的关键：输入状态的粒度与还原时机
很多实现只存 value，但漏掉了 checkbox/radio 的 checked 状态、富文本编辑器的 selection、滚动位置、甚至临时展开的下拉菜单状态。
- 建议封装一个
captureInputState()，按类型分别处理：input[type=checkbox]读checked，contenteditable读innerHTML，scrollTop存容器偏移 - 还原不是越早越好：DOM 加载完成（
DOMContentLoaded）后还原，但若页面有懒加载组件（如 tab 切换后才渲染的表单），得等其 mounted 后再还原对应字段 - 用户可能在冻结前刚输了一半字就切走了——这时快照是旧的，但没被覆盖；下次恢复时反而要防止“倒退式还原”，建议加时间戳比对或版本号控制
回收垃圾 按钮，但它只是手动触发 GC，和页面生命周期无关；而 Page Lifecycle API 的价值不在“监听 GC”，而在**预判页面失活窗口，抢在不可逆之前把用户意图稳稳接住**。真正难的不是存和取，而是判断哪些状态值得存、什么时候存最安全、以及还原时如何不干扰当前交互流。 
