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
• Редактирование и черновики