表单数据本地暂存防丢失的关键在于“存得准、读得对、清得及时”：输入阶段需防抖写入、安全序列化与异常捕获；提交阶段须拦截表单、确保写入完成、成功后清理缓存；恢复阶段应在DOM就绪后严格比对还原；多场景下需结合sessionStorage、beforeunload及版本标识兜底。
表单数据本地暂存防丢失，关键不是“存得够不够勤”，而是“存得准不准、读得对不对、清得及时不及时”。单纯调用 localStorage.setItem() 很容易白忙一场——比如中文输入中途就存了半截字、页面还没加载完就读缓存导致赋值失败、多标签页互相覆盖草稿。真正起作用的是一套有节奏、有判断、有兜底的动作组合。
输入阶段：防抖写入 + 安全序列化
别在 input 事件里直接写 localStorage。中文输入法下会高频触发，不仅卡顿，还可能存入未完成的拼音或空格。应加防抖：
- 用
setTimeout+clearTimeout控制写入时机，延迟设为 400–600ms 较稳妥 - 写入前做清洗：
value.trim()去首尾空格，避免存无效空白 - 一律用
JSON.stringify({ value, timestamp: Date.now() })存储，不存原始对象或 DOM 引用 - 包裹
try...catch，捕获QuotaExceededError等异常，尤其 iOS Safari 隐私模式下静默失败
提交阶段：拦截 + 缓存清理 + 成功确认
提交不是终点，而是状态切换的临界点：
- 必须用
form.addEventListener('submit', e => { e.preventDefault(); ... })拦截，否则跳转瞬间无法操作 - 提交前确保最后一次写入已完成（可加微小延时或 await 上次防抖结束）
- 请求成功后立刻调用
localStorage.removeItem('form-cache-key')，避免下次打开仍是旧草稿 - 若使用
fetch提交，需明确判断response.ok和业务返回码，失败时不清理缓存
恢复阶段：DOM 就绪后比对还原
缓存存在不等于能显示出来，还原失败常因执行太早或逻辑太粗：
立即学习“前端免费学习笔记（深入）”；
- 还原代码必须放在
DOMContentLoaded事件内，或用document.currentScript?.nextElementSibling确保 DOM 已挂载 - 不要只看
localStorage.getItem()是否非空，要和字段当前value或checked做严格相等（===），避免初始 value 覆盖用户输入 - 复选框/单选框按
checked = true/false设置，不能只设value - 忽略
type="hidden"、disabled或只读字段，防止意外污染
多场景兜底：sessionStorage + beforeunload + 版本标识
单一 localStorage 不足以覆盖所有意外：
- 刷新瞬间丢失？用
sessionStorage存一份“秒级快照”，它在页面关闭前始终可用 - 用户手滑关页？监听
beforeunload事件，强制触发一次最终保存（但仅限非敏感字段） - 多标签页编辑同一表单？给缓存键加唯一标识，例如
form-cache-${location.pathname}-${Date.now().toString(36).slice(-6)}，或用performance.now()生成轻量 ID - 长期未清理？存储时附带时间戳，加载时检查是否超 7 天，自动丢弃过期草稿
