最稳方案是localStorage+input事件+手写防抖：800ms防抖覆盖中文输入节奏，键名需含上下文防覆盖，恢复时须DOM就位并派发input事件。
直接用 localStorage + input 事件 + 手写防抖是当前最稳、兼容性最好、面试时能讲清原理的方案。别信“定时器每5秒存一次”这种说法——它漏存严重，中文输入法下根本不可靠。
为什么不能用 setInterval 定时保存
定时器不管用户有没有真正在输，只按固定节奏执行。问题很具体：
- 用户粘贴一段长文本，
input事件会触发一次（内容已全），但定时器可能刚好错过这次触发，等下一秒再跑时，DOM 已更新，但你取的是旧值 - 富文本编辑器（如 Quill）不抛原生
input，定时器完全捕获不到变化 - 移动端键盘收起不触发
blur，也极少触发change，定时器成了唯一指望——但它连“用户刚输完”都判断不了 -
setInterval无法感知字段是否被动态插入（比如 JS 添加的新行），得额外监听 DOM 变化，复杂度陡增
input 事件必须配防抖，800ms 是实测底线
不是越快越好。300ms 在中文输入场景下仍会把“shang”存成“上海”的中间态；100ms 基本等于没防抖，主线程卡顿明显。800ms 是平衡点：
- 覆盖绝大多数拼音选词节奏（包括双拼、五笔简码）
- 用户停顿书写时，有足够时间完成思考、删改、再输入
- 关页前最后输入，只要停顿 ≥800ms，就已落盘；若不足，
beforeunload只负责提示，不负责存
手写防抖比用 Lodash 更可控：let timer; el.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(() => saveDraft(), 800); });
立即学习“前端免费学习笔记（深入）”；
键名和字段过滤必须严格，否则多表单互相覆盖
常见翻车点：所有表单共用一个 key，比如硬编码 localStorage.setItem('draft', data)。一开两个 tab，数据就乱套。
- 键名必须含上下文：
draft-${form.id || 'default'}-${Date.now().toString(36)}或更稳妥的draft-${location.pathname}-${form.dataset.key || 'main'} - 跳过这些字段：
type="password"、type="hidden"、name含token/captcha、带data-no-autosave属性的元素 - 只对
input、textarea、select、input[type="checkbox"]、input[type="radio"]生效；button、label等直接忽略
恢复草稿时 DOM 必须“真就位”，且要触发事件
很多代码在 DOMContentLoaded 里读 localStorage 并填值，结果 Vue 组件还没 mount，React 表单还是受控状态，填了等于白填。
- 填值前加检查：
if (el && 'value' in el) el.value = data[el.name]；对 checkbox/radio 单独处理：el.checked = Boolean(data[el.name]) - 填完必须触发事件：
el.dispatchEvent(new Event('input', { bubbles: true }))，否则v-model和react-hook-form完全无感 - 异步加载的表单，等它自己 dispatch 自定义事件（如
form-ready）后再恢复，别抢跑
真正容易被忽略的是：防抖延迟和键名生成逻辑必须一致。存的时候用 800ms，恢复时却用 300ms 的 key 去读——读不到，还查不出原因。
