表单提交后自动保存到localstorage的核心逻辑是拦截submit事件并调用preventdefault()，再序列化清洗后的数据（如object.fromentries(new formdata(form))）以带前缀的键名存入，提交成功后及时清除缓存。
表单提交后自动保存到 localStorage 的核心逻辑
表单提交后不刷新页面时，数据缓存靠 submit 事件拦截 + localStorage.setItem()；如果提交后页面跳转或刷新，必须在提交前完成写入，否则跳转瞬间就丢失上下文。
关键判断点：是否使用 event.preventDefault()。不阻止默认行为就无法在提交后继续操作 DOM 或存储数据——这是绝大多数人卡住的第一步。
- 用
form.addEventListener('submit', handler)拦截，别只监听按钮点击 - 写入前对值做简单清洗，比如去掉首尾空格：
value.trim() - 避免直接存整个
FormData对象（它不可序列化），要用Object.fromEntries(new FormData(form)) - 键名建议带业务前缀，例如
form-cache-login，防止多表单冲突
刷新后自动还原表单字段的注意事项
localStorage 里的字符串不会自动映射回表单控件，必须手动赋值，且时机很重要：DOM 加载完成后再执行，否则 document.querySelector() 找不到元素。
常见错误是把还原逻辑写在 <script></script> 标签里但放在 中，导致执行时表单 DOM 尚未解析。
- 推荐用
DOMContentLoaded事件包裹还原逻辑 - 只恢复用户可编辑字段：
input[type="text"]、textarea、select、input[type="checkbox"]等，忽略type="hidden"或禁用字段 - 复选框/单选框要按
checked属性设布尔值，不能只设value - 记得清空缓存：成功提交后调用
localStorage.removeItem('form-cache-key')，否则下次打开还是旧数据
避免重复提交和缓存污染的实用策略
用户手抖连点两次“提交”，可能触发两次写入，但更危险的是：第一次提交成功后没清缓存，第二次又提交了过期数据。
一个轻量但有效的方案是加时间戳标记 + 提交状态锁。
- 存缓存时一并写入时间戳：
{ data: {...}, timestamp: Date.now() } - 还原时检查时间戳是否超过 15 分钟（
Date.now() - cached.timestamp > 900000），超时则忽略 - 提交开始时给按钮加
disabled，同时设置sessionStorage.setItem('submitting', 'true')，防止 F5 刷新后误重发 - 不要监听
window.beforeunload做兜底缓存——现代浏览器限制该事件中异步操作，localStorage写入可能失败且无提示
兼容性与调试技巧
localStorage 在所有现代浏览器都可用，但 Safari 无痕模式下会抛 QuotaExceededError（即使空间充足），这是已知限制，不是代码 bug。
调试时别只看控制台，直接查 Application → Storage → Local Storage 面板，确认键名拼写、值是否为字符串、有无意外的 undefined 字段。
- 写入前加校验：
if (typeof value === 'object') value = JSON.stringify(value) - 读取后加
try/catch解析 JSON，防止缓存损坏导致整个还原逻辑崩溃 - 开发阶段可临时加
console.log('cached:', JSON.parse(localStorage.getItem('...')))快速定位字段映射问题 - 移动端键盘收起后触发
blur，但别依赖它做缓存——用户可能切走 App，blur不一定触发
缓存本身很简单，难的是边界情况：跳转、刷新、连点、无痕模式、字段动态增删……这些地方不显式处理，上线后就会变成“偶尔出问题”的玄学 Bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
