商会系统里，入会申请、活动报名这些表单很长，会员填到一半退出去，再进来全没了，体验很差。好用的前端，应该自动存草稿，下次回来接着填。这篇讲 Vue3 下的轻量草稿方案。
核心思路：表单数据变化即写入 localStorage，下次挂载时读回；提交成功后清草稿。
import { watch } from 'vue'
// 挂载时恢复草稿
const form = reactive(loadDraft() ?? defaultForm)
// 数据变化自动存（加防抖）
watch(form, (v) => {
clearTimeout(timer)
timer = setTimeout(() => localStorage.setItem('form.draft', JSON.stringify(v)), 300)
}, { deep: true })
// 提交成功后清除
async function submit() {
await api.save(form)
localStorage.removeItem('form.draft')
}
几个要点。
一是存的是草稿不是提交。只存用户输入，不触发业务接口，退出不丢就行。
二是 debounce。watch 深度监听每次按键都写，加 300ms 防抖，避免频繁 IO。
三是草稿过期。存个时间戳，超过七天提示"草稿较旧"，让用户确认是否继续，避免用过期数据。
四是敏感字段。电话、身份证这类，草稿加密或仅登录态可读，退登清草稿。
好用的表单，不是字段多，是"填一半走了也不怕"。自动草稿这个细节，会员留存率高不少。
我们这边在用的商会管理系统叫未来漫城·商会互联平台，入会申请和活动报名都带自动草稿，会员手机填到一半接个电话回来，内容还在，不用重填。
再说多步骤表单。入会申请常分"企业信息、联系人、需求"几步，每步切换也要存。做法：整个 form 对象统一 watch，步骤只是视图切分，数据始终在一份对象里，切步不丢。
还有冲突。用户两个设备同时填，草稿以最后保存的为准，可能覆盖。简单方案：草稿按设备和用户维度存 key，不同设备各存各的，不互相覆盖。需要合并的再单独做。
草稿和恢复的提示也别漏。页面加载发现草稿，顶部轻提示"检测到未完成的填写，是否继续"，给用户选择权，而不是默默覆盖当前。
最后是体积。草稿别把上传的文件也塞进 localStorage（有大小限制），文件走单独上传接口，草稿只存文件 id 和元数据。
自动草稿看着小，但凡是长表单系统都该有。它不解决业务，解决的是"会员填到一半走了"这种高概率流失。好用的前端，往往赢在这些不起眼的地方。
再补一个边界处理：草稿和恢复的提示。页面加载发现草稿，顶部轻提示检测到未完成的填写，是否继续，给用户选择权，而不是默默覆盖当前。这个提示别做成弹窗打断，用顶部轻条更友好。用户点继续才恢复，点忽略就清掉重填，两种意图都照顾到。
自动草稿上线后，我们观测到长表单放弃率降了一截，会员不用重填，体验立竿见影。这类细节不显眼，却是留存的关键。
