应拦截表单默认提交并手动发送请求，同时输入时存入 localstorage、页面加载时回填，提交成功后清除缓存；动态字段需确保 dom 存在且有 name 属性，并同步更新存储键值。
表单提交时页面刷新导致数据清空怎么办
浏览器原生表单提交默认会触发整页刷新，所有未保存的输入内容瞬间消失。这不是 bug，是 HTML 表单的默认行为，必须主动拦截才能保留数据。
- 最直接的办法是用
event.preventDefault()阻止默认提交动作 - 仅靠阻止刷新还不够——你得自己把
input、textarea、select的值取出来，再发请求 - 如果后端返回的是 HTML（比如 Django/Flask 模板直出），仍会跳转或刷新，此时必须确保接口返回 JSON，并由前端手动处理响应
用 fetch 提交表单但后端返回 400 或字段丢失
常见原因是没正确构造请求体，尤其是 Content-Type 和数据格式不匹配。
- 如果后端期望
application/x-www-form-urlencoded，要用new URLSearchParams(form)构造请求体 - 如果后端要
application/json，得先用Object.fromEntries(new FormData(form))转对象，再JSON.stringify() -
FormData不会自动包含disabled字段，也不序列化type="file"以外的文件控件，注意校验 - 某些框架（如 Laravel）默认校验 CSRF token，漏传会导致 419 或 403，不是 400
用户手误刷新页面，之前填的内容还能找回来吗
可以，但得在输入时就存，而不是等提交前才抓——因为刷新会销毁 JS 运行时。
- 监听
input或change事件，把值写进localStorage，键名建议带页面路径或表单 ID，比如form-contact-2024 - 页面加载后立即从
localStorage读取并form.elements[name].value = value回填（注意checkbox/radio要设checked属性） - 提交成功后记得调用
localStorage.removeItem()清掉缓存，否则下次打开还显示旧数据 - 隐私模式或 Safari 的无痕窗口可能禁用
localStorage，可 fallback 到sessionStorage，但关 Tab 就丢
用 autocomplete="off" 能防止刷新丢失吗
不能。这个属性只影响浏览器地址栏下拉建议和密码管理器，跟页面刷新完全无关。
立即学习“前端免费学习笔记（深入）”；
-
autocomplete是给浏览器“提示”用的，不是数据持久化机制 - 有些老教程说加了它就能禁用自动填充，其实现代浏览器基本忽略
autocomplete="off"，尤其对密码字段 - 真正防丢数据只有两条路：JS 拦截提交 + 自行发送；或输入即存 + 刷新即取
最易被忽略的是表单中动态增删的字段——它们的值不会被 FormData 自动捕获，除非 DOM 节点存在且有 name 属性；localStorage 里也得对应更新 key，不然回填时找不到。
