HTML无法自动保存，需JavaScript结合localStorage与事件监听实现；推荐防抖+beforeunload组合，避免setInterval导致的数据丢失、I/O浪费及主线程阻塞等问题。
HTML 本身做不到自动保存，必须靠 JavaScript 驱动 localStorage + 合理事件监听才能落地。定时轮询（setInterval）是下策，防抖+beforeunload 才是真实用、少丢数据的组合。
为什么不能直接用 setInterval 每30秒存一次
setInterval 看似简单，但实际会带来三类问题：一是用户刚敲完字就关页，最后一次输入没来得及存；二是内容没变也硬写，浪费 I/O 还可能触发 QuotaExceededError；三是移动端键盘收起、页面切后台时，定时器可能被系统暂停或降频，导致漏存。
更关键的是：localStorage.setItem() 是同步操作，但频繁调用仍会阻塞主线程——尤其在低配 Android 设备上，连续 10 次写入就能感知卡顿。
- 别写
setInterval(() => { saveDraft() }, 30000)这种逻辑 - 真要用定时器，至少加“值比对”：只在
JSON.stringify(formData)和上次缓存不同时才写 - 注意 Safari 无痕模式下
localStorage直接静默失败，try/catch里捕获不到异常，得先做可用性探测
input 事件 + 防抖才是主流做法
监听 input 事件能捕获每次按键、粘贴、中文输入法上屏，比 change 或 blur 更及时。但原生触发太密，必须加防抖。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 用
setTimeout+clearTimeout手写防抖，延迟设为400–600ms（太短易漏，太长易丢） - 只对非空字段存：比如
if (el.value.trim()) { ... }，避免覆盖 placeholder 或初始值 - 键名带上下文：如
draft-${location.pathname}-${el.name}，防止多表单冲突 - 存前用
JSON.stringify()，取回必须JSON.parse()，否则getItem()返回null会导致SyntaxError: Unexpected token u
beforeunload 必须配合“脏标记”使用
beforeunload 是唯一能拦截关闭/刷新的时机，但它只允许同步执行，且窗口极短（约 50ms）。很多人在这里写 await saveDraft()，结果什么都没存成。
正确姿势是：
- 定义一个全局布尔变量
hasUnsavedChanges = false - 每次防抖存完后设为
false；每次 input 触发时设为true -
beforeunload回调里只做一件事：if (hasUnsavedChanges) return ''（现代浏览器只显示统一提示） - 真正的存储动作，必须在防抖函数里完成，不能拖到
beforeunload里
恢复草稿时容易忽略的细节
页面加载后恢复不是简单遍历赋值。几个硬坑：
-
textarea用.value = text即可，但contenteditable元素得用.innerText = text，别用.innerHTML（XSS 风险） - checkbox/radio 要单独处理：
el.checked = storedValue === 'true'，不能直接赋value - 恢复后手动触发
dispatchEvent(new Event('input', { bubbles: true }))，否则 Vue/React 不响应 - 时间戳校验别漏：存的时候写
savedAt: Date.now()，恢复前判断是否超 24 小时，过期就丢弃
最麻烦的其实是动态字段和富文本编辑器——它们不走原生 input 流，得各自绑定对应事件（如 Quill 的 text-change），而且 DOM 插入后必须立刻监听，否则新增行的输入就进不了草稿。
