优先结构化裁剪表单字段，仅存12个核心项；JSON序列化前去缩进、长文本base64或lz-string压缩；超200KB则分块存储并加版本号；监听QUOTA_EXCEEDED_ERR等异常，提供复制摘要和.txt导出兜底。
直接用 localStorage 存长表单数据，容易因字符串体积过大、序列化/反序列化卡顿，甚至触发浏览器内存警告或静默失败。关键不是“能不能存”，而是“怎么存得稳、读得快、不拖垮页面”。
优先做结构化裁剪，只存真正需要的字段
用户填了20个输入框，但真正要保留的是其中12个核心字段（比如姓名、手机号、地址、意向产品），其余如“备注”“补充说明”可选存；校验失败的字段、空值、默认值一律不进存储。这能立刻减少30%–60%的数据体积。
- 提交前遍历表单元素，用
element.name和element.value.trim()提取有效值 - 跳过
type="hidden"或disabled的控件，除非业务强依赖 - 对富文本编辑器内容，先用
textContent或简单 HTML 清洗（如移除 style、script 标签），再截断到 5000 字以内
用 JSON 序列化 + 压缩逻辑降低体积
localStorage 只接受字符串，但原始 JSON 可能含大量空格、重复键名、冗余引号。不压缩时，一个 80KB 的表单对象转成字符串可能达 120KB；经轻量处理后常可压到 60KB 以内。
- 存入前用
JSON.stringify(data, null, 0)去掉换行缩进 - 对长文本字段（如 textarea）单独 base64 编码或使用
lz-string做轻量压缩（仅 3KB JS，支持同步） - 避免直接存 Date 对象或函数——统一转为 ISO 字符串或时间戳数字
分块存储 + 版本标记防覆盖冲突
单次写入超 200KB 字符串，在部分旧版 Safari 或低端安卓 WebView 中易失败。更稳妥的做法是把大表单拆成逻辑块，加时间戳和版本号管理。
立即学习“前端免费学习笔记（深入）”；
- 例如：表单 ID 为
loan-app-20260430-abc，则存为form_loan-app-20260430-abc_meta（基础信息）、form_loan-app-20260430-abc_detail（明细） - 每次保存前先读取已有版本号，新数据带
v: 2，避免后台异步操作导致低版本覆盖高版本 - 设置自动清理：超过 3 个历史版本，或 7 天未更新的草稿，调用
localStorage.removeItem()主动释放
监听存储异常并提供降级提示
即使做了优化，仍可能遇到 QUOTA_EXCEEDED_ERR（配额超限）或 SecurityError（隐私模式下禁用）。不能静默吞掉错误，需给用户明确反馈和备用路径。
- 用
try...catch包裹localStorage.setItem()，捕获DOMException - 报错时弹出轻提示：“暂无法保存草稿，您可复制下方内容备用”，并生成带格式的纯文本摘要（用
textarea显示） - 提供一键导出为 .txt 文件按钮（用
Blob + URL.createObjectURL），这是最可靠的兜底方式
