表单数据备份需实时监听input/change事件存入localstorage，页面加载时仅当字段全空才恢复，提交成功后在响应确认逻辑中清除；多标签页需防覆盖，避免污染数据。
表单提交前的数据备份，核心是用 localStorage 在用户输入时自动存、页面加载时选择性恢复、提交成功后立即清空——漏掉清除这一步，下次打开就会误恢复旧数据。
监听 input 和 change 事件存值，别只靠 submit
用户还没点提交，数据就可能因刷新/崩溃丢失。不能等 submit 事件才存，得实时捕获变化：
-
input事件适合<input type="text">、<textarea></textarea>：每敲一个字就触发，响应及时 -
change事件更适合<select></select>、<input type="checkbox">、<input type="radio">：避免高频写入，等用户选完再存 - 别用
form.addEventListener('input', ...)直接绑在 form 上——不是所有浏览器都支持事件冒泡到 form 的 input 类型 - 手动遍历
form.elements取值，而不是用new FormData(form)：后者会跳过未选中的checkbox和disabled字段
恢复草稿时必须检查字段是否为空
页面加载后直接恢复，很可能覆盖 URL 参数预填的内容（比如邮箱已带在链接里）或用户刚输的几个字：
- 在
DOMContentLoaded里执行恢复逻辑 - 逐个检查
form.elements[i].value或form.elements[i].checked是否为空字符串/未勾选，**全为空才恢复** - 恢复后给表单加
data-draft-restore="done"属性，防止脚本多次执行 - 动态增删的字段（如多组地址）只恢复 DOM 中已存在的节点，新增项不处理，避免索引错位
提交成功后必须在响应回调里清除 localStorage
这是最容易被忽略的关键点：清除动作不能放在 submit 事件里，也不能只靠前端判断“看起来成功了”——网络可能中断，后端可能返回 200 但实际入库失败：
- 用
fetch或axios提交后，在then里且明确检查response.ok === true和业务字段（如res.data.success === true）再调用localStorage.removeItem('draft-form-contact') - 如果后端支持，返回时带上
draft_cleared: true字段，作为清除依据更可靠 - 有“保存为草稿”按钮的场景，要单独处理：点击时只存不删，并标记
data-draft-status="saved"，和自动备份区分开
真正难的不是存和取，而是判断“什么时候该恢复”“什么时候该清”，以及多标签页下如何避免互相覆盖——这些边界条件没处理好，备份功能反而会变成数据污染源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
