beforeunload不能直接存草稿，因其仅支持同步执行且禁止异步api；正确做法是实时监听input、change等事件，结合formdata与elements遍历安全序列化字段，配合时间戳管理localstorage草稿并及时清理。
为什么 beforeunload 不能直接存草稿？
浏览器原生的 beforeunload 事件只允许同步执行、且不允许调用异步 API（比如 localStorage.setItem 在某些旧版 Safari 中可能被阻塞，更别说 fetch 或 IndexedDB）。直接在里面写保存逻辑，大概率失败或被忽略。
正确做法是：草稿必须「实时存」或「变更即存」，而不是等到用户要关页才动手。
- 监听
input、change、blur等事件，对文本类字段（textarea、input[type="text"]等）立即写入localStorage - 避免监听
keydown——太频繁，影响性能；也别等表单提交才存——万一网络失败或页面崩溃就全丢 - 给每个表单加唯一标识（比如
form.dataset.draftKey），避免不同页面/表单互相覆盖
如何安全地序列化表单字段？
直接用 form.elements 遍历再手动拼对象容易漏掉复选框、文件输入、富文本容器。推荐用标准 DOM API + 少量判断：
- 用
new FormData(form)获取所有已提交值，但它不包含未选中的checkbox或radio——需额外处理「未选中但有默认值」的场景 - 更稳妥的做法：遍历
form.elements，对每个元素按类型取值：input[type="checkbox"]和input[type="radio"]要检查checked；select[multiple]要取selectedOptions；textarea直接读value - 跳过
type="file"字段（无法存文件内容，且value在多数浏览器里是空字符串或 fake path） - 敏感字段（如密码）建议显式排除，哪怕只是草稿也不该落盘
localStorage 存多久？怎么清理？
草稿不是永久备份，而是「临时容错」。不设自动过期，反而容易堆积脏数据。
- 每次存草稿时，同时记录时间戳：
{ data: {...}, timestamp: Date.now() } - 加载时先检查时间戳，超过 7 天的草稿默认丢弃（可配，但别设成无限期）
- 表单成功提交后，立刻调用
localStorage.removeItem(key)清掉对应草稿 —— 这步常被遗忘，导致下次打开还弹“恢复草稿？” - 如果用户主动点击“清空草稿”或“放弃编辑”，同样要删
localStorage对应项
恢复草稿时怎样避免覆盖用户当前输入？
自动填充草稿很危险：用户可能已经改了几行，你一 restore 就全冲掉。
- 只在页面首次加载、且表单为空时尝试恢复（
!form.checkValidity() || !hasUserInput(form)） - 或者更友好：检测到有本地草稿，就在表单顶部加一行提示条（非模态），带「恢复」和「忽略」按钮，由用户决定
- 恢复逻辑要逐字段比对：仅填充
value为空的字段；已输入内容的字段跳过，不强刷 - 注意
contenteditable区域或第三方编辑器（如 TinyMCE）需单独对接其 API，不能只靠value
最麻烦的其实是动态表单：字段随选择增减。这类必须把草稿结构和当前 DOM 结构做字段名映射，光靠 name 属性不够，得靠 data-id 或生成唯一 field key。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
