localStorage暂存大型表单需结构化分段存储、加时间戳与版本标记、监听visibilitychange/beforeunload事件、防抖写入、结合sessionStorage实现会话隔离。
localStorage 适合暂存大型表单数据，但直接使用存在几个关键限制：它只支持字符串，单次操作同步阻塞主线程，且没有内置过期机制。实际应用中，不能简单把整个表单对象 JSON.stringify() 后一股脑存进去就完事——得兼顾可恢复性、性能和用户体验。
结构化分段存储，避免单条超限或卡顿
大型表单往往包含多步骤、大量字段（如地址信息、附件元数据、富文本内容等）。若全部塞进一个 key，容易触发浏览器写入延迟，甚至在某些旧版 Safari 中因字符串过长而静默失败。
- 按逻辑模块拆分，例如：
form-step1-basic、form-step2-upload、form-step3-review - 每个 key 存储独立 JSON 字符串，控制单条长度在 50KB 以内（远低于 5MB 上限，留足余量）
- 对大字段（如 base64 图片、长文本）做轻量预处理：截断预览、记录哈希、或仅存标识符+本地文件引用（配合 File API）
添加时间戳与版本标记，支持安全恢复
用户可能长时间离开页面、切换标签页、或意外刷新。没有上下文的纯数据无法判断是否“过期”或“冲突”。
- 每次写入时附带时间戳和表单版本号：
{ data: {...}, timestamp: Date.now(), version: "v2.1" } - 读取时校验时间差（例如超过 24 小时自动丢弃），并提示用户“检测到草稿，是否恢复？”
- 避免覆盖：提交成功后主动调用
removeItem清理对应 key，防止重复提交
监听页面可见性与卸载事件，提升保存可靠性
单纯依赖“失去焦点”或“点击提交按钮”不够稳健。用户可能直接关掉标签页、切走再回来、或网络中断。
- 用
visibilitychange监听页面隐藏，在隐藏前自动保存当前状态 - 用
beforeunload做兜底（注意：该事件中只能执行同步操作，适合快速序列化） - 避免高频写入：对输入框加防抖（如 800ms），防止每敲一个字都触发
setItem
配合 sessionStorage 做会话隔离，防止跨标签干扰
如果表单支持多开（比如多个报价单同时编辑），共用 localStorage 会导致数据互相覆盖。
- 用
sessionStorage生成唯一会话 ID：const sessionId = sessionStorage.getItem('form_session') || Math.random().toString(36).substr(2, 9) - 所有 localStorage key 加上前缀：
form_${sessionId}_step1 - 关闭页面时清除该 session 对应的所有 key，不影响其他打开的表单实例
