应监听input事件实时保存草稿至localStorage，使用表单id作键名前缀避免冲突，空值也保存以防覆盖，排除密码等敏感字段；加载时按name匹配还原并提示用户，提交成功后立即清除对应草稿及时间戳，多标签页通过时间戳比对防覆盖。
表单失去焦点时用 localStorage 保存字段值
用户没提交就关页或刷新，草稿就丢了——最直接的补救是监听 blur 或 input 事件，把每个可编辑字段的值实时存进 localStorage。注意别只监听 submit，那已经太晚了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对
<input>、<textarea>、<select>统一绑定input事件（blur容易漏掉未失焦就跳转的情况） - 用表单
id作为localStorage的 key 前缀，比如form-draft-contact，避免不同表单互相覆盖 - 值为空时也存入（清空即“清空草稿”），否则下次加载会残留旧值
- 敏感字段（如密码、银行卡号）跳过保存，可在
name或data-no-draft属性上做标记
页面加载时用 localStorage 自动还原草稿
还原不是简单地把值塞回去，得兼顾用户真实意图：如果表单已提交成功、或用户主动清空过，就不该再弹出旧草稿干扰操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
DOMContentLoaded后立即检查对应 key 是否存在，存在则遍历字段匹配name属性还原 - 还原后给表单加个提示 banner（如“已恢复上次未提交的内容”），并提供「清除草稿」按钮，按钮点击后调用
localStorage.removeItem() - 还原前先判断字段当前是否为空或有默认值，避免覆盖初始 placeholder 或服务器回填内容
- 对
type="checkbox"和type="radio"，需按checked状态存取布尔值，不能只存value
提交成功后必须清除 localStorage 草稿
这是最容易被忽略的一环：不清理会导致下次打开页面又载入已提交过的数据，用户可能重复提交，或误以为上次失败了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅在收到明确的成功响应（HTTP 2xx + JSON 中
success: true）后再调用localStorage.removeItem() - 使用
fetch时，在.then()里清除；用XMLHttpRequest则在onload且status === 200时清除 - 若提交走的是传统全页跳转（
method="POST"+ 无 JS 拦截），无法 JS 清除草稿，此时应在服务端返回页面时，内联一段脚本执行清除（<script>localStorage.removeItem('...')</script>）
处理多标签页/多窗口并发编辑冲突
用户可能同时在两个标签页打开同一表单，A 页存了草稿，B 页又改了并提交，A 页再提交就会覆盖或错乱——localStorage 本身不支持监听跨页变更，得靠时间戳兜底。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每次保存草稿时，额外存一个时间戳字段，例如
form-draft-contact-timestamp - 还原时读取时间戳，如果距今超过 1 小时（或业务允许的窗口期），提示“检测到较久未更新的草稿，是否恢复？”
- 提交成功后，不仅删草稿，也删对应的时间戳；还原前先比对时间戳，若当前页面加载时间早于草稿时间戳，说明有更新版本存在，可禁用自动还原
localStorage 只是载体，关键在什么时候存、什么时候不存、什么时候敢还原。 
