轻应用表单填一半就关了？草稿自动保存与断点恢复的 4 个关键点

导读：用户填长表单时切后台、断网、误关页面，填到一半的内容说没就没，体验差还丢数据。本文给出草稿自动保存与断点恢复的方案：存储方式、节流策略、版本冲突处理，附实现代码与踩坑清单。

一、为什么需要草稿自动保存

长表单（资料登记、信息录入、订单备注）普遍存在"填写周期长、中途易中断"的问题。用户切到别的应用回个消息、网络切换、系统杀后台，表单状态就丢了。等用户重来一遍，大概率直接放弃。

草稿自动保存的价值有两层：一是把填写现场持续落盘，随时能恢复；二是让用户感知"内容不会丢"，愿意把长表单填完。实现上有四个关键点：存哪里、多久存一次、怎么恢复、冲突怎么办。

二、存储怎么选：本地优先，服务端兜底

要点：单页短表单用 localStorage 即可，键值对简单直接；字段多、带图片附件的草稿用 IndexedDB；需要"换设备接着填"才上服务端暂存，并配合过期清理策略，避免草稿越积越多。

三、自动保存的实现：节流 + 增量

保存频率要平衡"丢内容"与"频繁写库"。输入停止后 1-2 秒保存一次，比每次按键都写更合理；大字段（图片、长文本）做增量保存，避免整包重写。

// 防抖自动保存：停止输入 1.5 秒后落盘
const KEY = 'form:draft:apply';
let timer = null;
function onInput(field, value) {
  draft[field] = value;
  clearTimeout(timer);
  timer = setTimeout(() => {
    localStorage.setItem(KEY, JSON.stringify(draft));
  }, 1500);
}

// 页面恢复时读取草稿
function restore() {
  const raw = localStorage.getItem(KEY);
  if (!raw) return;
  const saved = JSON.parse(raw);
  Object.keys(saved).forEach((k) => {
    const el = document.querySelector(`[name="${k}"]`);
    if (el && !el.value) el.value = saved[k];
  });
}

要点：防抖 1-1.5 秒是体验与性能的平衡点；恢复时只回填"当前为空"的字段，避免覆盖用户新输入的内容；提交成功后要清除草稿，否则下次进来还会带上旧数据。

四、版本冲突与恢复策略

草稿恢复最怕两个问题：草稿是旧的、用户已经改了。常见做法是给草稿加时间戳与版本号：

{
  "version": 3,
  "savedAt": "2026-10-08T09:30:00",
  "fields": { "name": "张工", "phone": "13800000000" }
}

要点：恢复时对比 savedAt，超过一定时长（如 24 小时）的草稿提示"有旧草稿，是否恢复"；同一表单多端填写时，以"最后修改时间"为准合并，字段级冲突取时间较新者；草稿不承载敏感字段的长期留存，设置自动过期，保护用户数据。

五、踩坑清单

1. 每次按键都写 localStorage：性能差、还频繁唤醒存储；
2. 恢复时整表覆盖：用户新输入被旧草稿冲掉；
3. 提交成功不清理草稿：下次进来带着过期数据；
4. 草稿永不过期：长期积压、隐私风险；
5. 图片/附件一起塞 localStorage：容量爆掉写入失败；
6. 不区分多表单：两个表单共用同一个 key，互相覆盖；
7. 恢复时机太早：页面未渲染完就回填，字段找不到。

六、工程落地建议

按"本地优先存储 → 防抖增量保存 → 版本合并恢复 → 提交即清理"落地，长表单先保现场、再谈体验。同类分层在乔拓云轻应用的表单模块中有对应实现，可按这套方案直接起步。

七、复盘清单

• 草稿多久存一次？断网 10 分钟能找回多少内容？
• 恢复会覆盖用户新输入吗？
• 提交成功后草稿清理了吗？
• 草稿有自动过期策略吗？

八、结语

草稿自动保存是长表单体验的"隐形保险"。存哪里、存多频、怎么恢复、冲突怎么办，四个问题想清楚，用户就再也不会因为"填一半丢了"而放弃一张表单。