应采用“watch监听+销毁钩子兜底”双保险策略：日常用防抖watch同步关键字段至localstorage，离开前在onbeforeunmount中强制保存；只存白名单字段，日期转iso，避开敏感/不可序列化内容；提供clearformcache手动清除，并智能合并缓存值而非覆盖初始状态。
不能用 watch 直接监听“组件销毁前”这个时机，因为它本身不响应生命周期事件。但你可以把 watch 和销毁钩子配合使用，在状态变更时持续备份，再在销毁前强制落盘一次，实现真正可靠的自动同步备份。
监听变化 + 销毁兜底：双保险写法
核心逻辑是两步走：日常靠 watch 捕获字段变更并防抖存缓存；离开前用 onBeforeUnmount（Vue 3）或 beforeDestroy（Vue 2）触发最后一次强制保存，防止最后几秒输入丢失。
- 用
watch监听表单 ref 或 reactive 对象，搭配防抖函数延迟写入 localStorage - 在
onBeforeUnmount中调用一次立即保存，覆盖可能未触发的防抖回调 - 示例中可加版本号或时间戳标识缓存有效性，避免旧缓存干扰新表单
只存关键字段，避开敏感与不可序列化内容
不是所有字段都适合持久化。直接 JSON.stringify 整个表单容易出错——比如含函数、undefined、Date 实例或循环引用时会报错或丢数据。
- 提前定义白名单字段，如
['name', 'email', 'content']，只同步这些值 - 对日期类字段转成 ISO 字符串，布尔/数字保持原样，空字符串和 null 显式保留
- 避开密码、token、临时文件对象等敏感或不可恢复字段，不进缓存
提供手动清除入口，兼顾用户体验与隐私合规
自动备份必须配手动清空能力。用户可能想重填、切换账号，或 GDPR 要求支持一键删除本地痕迹。
- 暴露一个
clearFormCache()方法，移除 localStorage 对应 key，并重置表单值 - 可在页面底部加“清空草稿”按钮，或在表单提交成功后自动调用清除
- 若涉及多步骤流程，可按步骤名分 key 存储（如
form-step1、form-step2），便于局部清理
加载时智能恢复：合并而非覆盖
页面初始化读取缓存时，不要粗暴 Object.assign 全量覆盖初始值——这会清掉默认提示文案、禁用状态或计算属性。
- 只将缓存中“非空且字段存在”的值合并进当前表单对象
- 例如初始值为
{ name: '', email: 'hint@example.com' }，缓存有{ name: 'Alice' }，则只更新name，保留email的占位提示 - 可用
for...in遍历缓存对象，逐个判断字段是否在初始结构中且值有效
