表单本地缓存失败的主因是未拦截submit事件导致页面跳转，正确做法是监听form submit事件并立即preventdefault，再序列化formdata为对象清洗后存localstorage，页面加载时在domcontentloaded时机手动还原字段，并在提交成功后清理缓存。
表单提交前必须拦截 submit 事件
不调用 event.preventDefault()，浏览器就会按默认行为跳转或刷新，后续任何 JS 操作（包括写入 localStorage）都来不及执行。这是本地缓存失败的最常见原因——不是 localStorage 不行，是根本没机会运行。
正确做法是用 form.addEventListener('submit', handler) 绑定，而不是监听按钮点击；否则用户回车提交、或用辅助工具触发表单提交时，缓存逻辑就漏掉了。
- 务必在 handler 开头就写
event.preventDefault() - 如果提交后页面要跳转，缓存操作必须在跳转前完成（比如
window.location.href = '...'之前） - 避免在异步回调（如
fetch().then()）里才写缓存——成功响应可能晚于页面卸载
序列化 FormData 要先转成普通对象
FormData 对象本身不能直接 JSON.stringify()，强行存进去再读出来会是空对象或报错。必须用 Object.fromEntries(new FormData(form)) 转成键值对 plain object，再清洗和存储。
清洗建议包括：value.trim() 去首尾空格、过滤掉 type="hidden" 或 disabled 字段、对 checkbox/radio 单独处理 checked 状态。
- 复选框要判断
input.checked，不能只取input.value - 单选组（
name相同）只需保留一个被选中的value，可用form.querySelector('input[name="xxx"]:checked')?.value - 键名加业务前缀，比如
form-cache-survey-v2，避免多个表单互相覆盖
页面加载后还原字段要等 DOM 就绪
localStorage 里的数据只是字符串，不会自动填进表单控件。必须手动赋值，且必须确保 DOM 已加载完成——否则 document.querySelector('input[name="email"]') 返回 null。
不要把还原逻辑写在 的 <script></script> 里，也不要依赖 window.onload（它等所有资源，太晚）。用 DOMContentLoaded 是最稳妥的时机。
- 只还原可编辑字段：
input[type="text"]、textarea、select、input[type="checkbox"]、input[type="radio"] - 还原 checkbox/radio 时设
elem.checked = true/false，不是elem.value - 还原前检查字段是否存在，避免
Cannot set property 'value' of null报错
缓存清理容易被忽略
提交成功后不主动清除 localStorage 项，用户下次打开页面仍会看到旧数据，甚至可能误提交重复内容。这不是“功能没做”，而是“做完没收尾”。
清理动作必须放在确认提交成功的路径上：比如 fetch 返回 2xx 后调用 localStorage.removeItem('form-cache-key')，而不是放在 finally 或按钮点击回调里——后者无法区分成功/失败。
更隐蔽的问题是：用户中途关闭页面、网络中断、或后端返回非 2xx 状态码，这时缓存应保留，以便恢复填写。所以清理逻辑一定要和业务成功状态强绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
