应采用防抖（800ms）、时间戳校验（24小时内）、beforeunload同步提示、focusout+visibilitychange补漏四策并举，确保多端草稿可靠存取。
localStorage.setItem() 每次输入都存，但别用 oninput 频繁触发
直接监听 oninput 并立刻调用 localStorage.setItem() 看似简单，实际会导致性能抖动，尤其在 textarea 输入中文时（输入法组合过程会高频触发），还可能覆盖未完成的输入。更稳妥的做法是加防抖：用户停顿 800ms 后再存。
实操建议：
- 用
setTimeout+clearTimeout手写防抖，不要依赖第三方库 - 键名建议带页面路径或表单 ID，比如
draft-contact-form-v1，避免多个表单互相覆盖 - 只对有 value 的
<input>、<textarea></textarea>、<select></select>生效，跳过按钮、隐藏域等 - 存之前用
JSON.stringify()序列化对象结构（比如同时存多个字段），取的时候用JSON.parse()，别直接存 raw string
页面加载时用 localStorage.getItem() 恢复，但得检查数据是否过期
localStorage 里内容不会自动失效，但用户可能上周填了一半就关了页面，今天打开不该还原过期草稿。需要存入时间戳做校验。
实操建议：
- 存的时候一起写入
savedAt: Date.now()，例如：{ "content": "xxx", "savedAt": 1715823400123 } - 恢复前先读出数据，判断
Date.now() - data.savedAt （24 小时内才恢复） - 如果表单有明确「提交成功」动作，记得用
localStorage.removeItem()清掉对应 key，否则下次进来还会恢复已提交的内容 - 恢复后手动触发
input或change事件（如el.dispatchEvent(new Event('input', { bubbles: true }))），确保 Vue/React 等框架能响应
离开页面前用 beforeunload 提示，但别在 handler 里执行异步操作
beforeunload 是唯一能拦截用户关闭/刷新的时机，但它要求 handler 必须是同步的，且浏览器只允许返回字符串（现代浏览器已屏蔽自定义提示文字，仅显示统一提示）。很多人试图在里面发 AJAX 或调用 await，结果什么都没存成。
实操建议：
- 只用它做「是否有未保存内容」的布尔判断，不执行存储逻辑
- 真正存储必须在之前完成（比如防抖后的最后一次保存）
- 设置一个标志位
hasUnsavedChanges = true，在每次输入防抖存完后设为false；在beforeunload中检查该标志，为true才返回提示字符串（如"内容尚未保存，确定要离开？"） - 注意：Safari 对
beforeunload更严格，部分场景（如 iframe 内）可能完全不触发
移动端键盘收起时不会触发 blur，得监听 focusout + visibilitychange
在 iOS Safari 或 Android Chrome 上，点击输入框唤出键盘，再点「完成」或空白处收起键盘，往往不触发 blur，导致你以为用户“离开了输入”，其实只是键盘藏了——内容还在编辑中，但没被存下来。
实操建议：
- 除了
blur，还要监听focusout（冒泡版，兼容更好） - 加上
visibilitychange事件：当用户切到其他 App 或锁屏，页面document.hidden === true，这时立即存一次 - 对
textarea特别注意：iOS 中输入法上滑选词时也会短暂失焦，频繁存反而干扰，所以仍需配合防抖，不能一失焦就存 - 测试时务必真机连 Safari Web Inspector 或 Chrome Remote Debug，模拟器常表现异常
防抖定时、时间戳校验、同步 beforeunload、多端失焦补漏——这四点缺一不可。最容易被忽略的是移动端的 visibilitychange 和 iOS 的输入法失焦行为，光靠 PC 思维写完代码，上线后草稿“神秘消失”基本就出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
