useDraft

表单草稿：用户输入的内容会保存到 localStorage，在刷新页面或稍后返回时恢复。表单成功提交或重置后会自动删除。

签名

function useDraft(form: Form, key: string, options?: { storage?: StorageLike; debounce?: number }): { restored: boolean; clear(): void }

参数	说明
key	存储中的键。不同表单使用不同的键：'signup'、`post-${id}`
options.storage	默认为 localStorage。使用 sessionStorage 时草稿保留到标签页关闭
options.debounce	保存前的延迟，毫秒。默认 300

返回 restored（是否恢复了草稿，例如用于显示“已恢复草稿”）和 clear()。

注意事项

• 只有在存在未保存的修改（form.dirty）时才会写入草稿。
• 不要在草稿中保存密码或银行卡数据：页面上的任何脚本都可以读取 localStorage。
• 在服务端（SSR）没有存储 —— useDraft 不会执行任何操作。

示例

<script setup lang="ts">
const form = useForm(Post, { initial: { title: '', body: '' } });
const draft = useDraft(form, 'new-post');
useLeaveGuard(form);
</script>

<template>
  <p v-if="draft.restored">Draft restored · <button type="button" @click="form.reset()">Discard</button></p>
</template>

另请参阅

• useLeaveGuard
• 编辑与草稿