Form Guardian

Универсальная библиотека автосохранения форм. Работает с любой библиотекой форм или обычными HTML-формами. Без зависимостей от фреймворков.

🚀 Быстрый старт

Выберите ваш фреймворк и начните за минуты:

React

Установка

npm install @form-guardian/react

Использование

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef, hasDraft, clearDraft } = useFormAutosave('my-form', {
    autoRestore: true,
  });

  return (
    <form ref={formRef} onSubmit={async (e) => {
      e.preventDefault();
      await clearDraft();
      // Отправка...
    }}>
      {hasDraft && <div>💾 Черновик сохранен</div>}
      <input name="name" placeholder="Имя" />
      <input name="email" type="email" placeholder="Email" />
      <button type="submit">Отправить</button>
    </form>
  );
}

Узнать больше →

Vanilla JS

Установка

npm install @form-guardian/dom

Использование

<script type="module">
  import { attachFormAutosave } from '@form-guardian/dom';

  const form = document.getElementById('my-form');
  const autosave = attachFormAutosave({
    formId: 'my-form',
    root: form,
    autoRestore: true,
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    await autosave.clear();
    // Отправка...
  });
</script>

<form id="my-form">
  <input name="name" placeholder="Имя" />
  <input name="email" type="email" placeholder="Email" />
  <button type="submit">Отправить</button>
</form>

Узнать больше →

Vue

Установка

npm install @form-guardian/dom

Использование

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { attachFormAutosave } from '@form-guardian/dom';

const formRef = ref(null);
let autosave;

onMounted(() => {
  autosave = attachFormAutosave({
    formId: 'my-form',
    root: formRef.value,
    autoRestore: true,
  });
});

onBeforeUnmount(() => {
  autosave?.destroy();
});

const handleSubmit = async () => {
  await autosave.clear();
  // Отправка...
};
</script>

<template>
  <form ref="formRef" @submit.prevent="handleSubmit">
    <input name="name" placeholder="Имя" />
    <input name="email" type="email" placeholder="Email" />
    <button type="submit">Отправить</button>
  </form>
</template>

Узнать больше →

Angular

Установка

npm install @form-guardian/dom

Использование

import { Component, ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { attachFormAutosave } from '@form-guardian/dom';

@Component({
  selector: 'app-my-form',
  template: `
    <form #formElement (ngSubmit)="onSubmit()">
      <input name="name" placeholder="Имя" />
      <input name="email" type="email" placeholder="Email" />
      <button type="submit">Отправить</button>
    </form>
  `
})
export class MyFormComponent implements OnInit, OnDestroy {
  @ViewChild('formElement') formElement!: ElementRef<HTMLFormElement>;
  private autosave;

  ngOnInit() {
    setTimeout(() => {
      this.autosave = attachFormAutosave({
        formId: 'my-form',
        root: this.formElement.nativeElement,
        autoRestore: true,
      });
    });
  }

  ngOnDestroy() {
    this.autosave?.destroy();
  }

  async onSubmit() {
    await this.autosave?.clear();
    // Отправка...
  }
}

Узнать больше →

Svelte

Установка

npm install @form-guardian/dom

Использование

<script>
  import { onMount, onDestroy } from 'svelte';
  import { attachFormAutosave } from '@form-guardian/dom';

  let formElement;
  let autosave;

  onMount(() => {
    autosave = attachFormAutosave({
      formId: 'my-form',
      root: formElement,
      autoRestore: true,
    });
  });

  onDestroy(() => {
    autosave?.destroy();
  });

  async function handleSubmit(event) {
    event.preventDefault();
    await autosave.clear();
    // Отправка...
  }
</script>

<form bind:this={formElement} on:submit={handleSubmit}>
  <input name="name" placeholder="Имя" />
  <input name="email" type="email" placeholder="Email" />
  <button type="submit">Отправить</button>
</form>

Узнать больше →

Возможности

• 🌐 Универсальность - Работает с React, Vue, Angular или обычным HTML
• 💾 Хранилище IndexedDB - Надежное хранение черновиков в браузере
• ⚛️ React Hooks - Готовые к использованию хуки для React приложений
• 🔒 Безопасность - Автоматическое исключение чувствительных полей
• ⏰ Поддержка TTL - Автоматическое истечение срока черновиков
• ⚡ Debounce - Оптимизация производительности
• 🛡️ Предотвращение конфликтов - Автоматическая блокировка сохранения во время восстановления
• 📊 События аналитики - Комплексная система событий для отслеживания (onBeforeSave, onAfterSave, onBeforeRestore, onAfterRestore, onDraftExpired)
• ⚙️ Пакетная обработка - Сохранение изменений пакетами для уменьшения нагрузки на IndexedDB
• 📈 Хук статуса черновика - Легковесный хук useDraftStatus для отслеживания статуса в реальном времени

Пакеты

@form-guardian/dom

Универсальное автосохранение форм на основе DOM. Работает с любой библиотекой форм или обычными HTML-формами.

Установка:

npm install @form-guardian/dom

Использование:

import { attachFormAutosave } from '@form-guardian/dom';

const form = document.getElementById('my-form');

const autosave = attachFormAutosave({
  formId: 'my-form-id',
  root: form,
  autoRestore: true,
});

form.addEventListener('submit', () => {
  autosave.clear();
});

Возможности:

• Работает с любой библиотекой форм (React, Vue, Angular, vanilla)
• Автоматическое обнаружение полей
• Безопасность: исключает поля паролей и чувствительные данные
• Настраиваемая задержка (debounce)
• Поддержка TTL для истечения срока черновиков

@form-guardian/react

React хуки и компоненты для автосохранения форм. Построено поверх @form-guardian/dom.

Установка:

npm install @form-guardian/react

Peer зависимости:

• react: ^16.8.0 || ^17.0.0 || ^18.0.0

Использование:

import { useFormAutosave } from '@form-guardian/react';

function MyForm() {
  const { formRef, clearDraft } = useFormAutosave('my-form-id', {
    autoRestore: true,
  });

  return <form ref={formRef}>...</form>;
}

Возможности:

• API на основе React хуков
• Автоматическое управление черновиками
• Интеграция с react-hook-form, Formik и т.д.
• Поддержка контролируемых компонентов

@form-guardian/core

Headless ядро для управления черновиками. Универсальное, не зависящее от фреймворков.

Установка:

npm install @form-guardian/core

Использование:

import { saveDraftCore, loadDraftCore, clearDraft } from '@form-guardian/core';

// Сохранить черновик
await saveDraftCore('form-id', { name: 'Иван', email: 'ivan@example.com' });

// Загрузить черновик
const draft = await loadDraftCore('form-id');

// Очистить черновик
await clearDraft('form-id');

Возможности:

• Не зависит от фреймворков
• Хранилище IndexedDB
• Поддержка TTL
• Пользовательские бэкенды хранения

Как это работает

1. Обнаружение полей: Автоматически обнаруживает поля формы (input, textarea, contenteditable)
2. Сохранение с задержкой: Сохраняет черновик после того, как пользователь прекратил печатать (настраиваемая задержка)
3. Хранилище IndexedDB: Хранит черновики в IndexedDB браузера для постоянства
4. Автовосстановление: Опционально восстанавливает черновики при загрузке формы
5. Безопасность: Автоматически исключает поля паролей и чувствительные данные

Поддержка браузеров

• Современные браузеры с поддержкой IndexedDB
• Chrome, Firefox, Safari, Edge (последние версии)
• Мобильные браузеры (iOS Safari, Chrome Mobile)

Узнать больше

• 📖 Почему Form Guardian? - Поймите проблему, которую мы решаем
• 🔍 Сравнение - Сравните с другими решениями
• 🚀 Начало работы - Руководство по быстрой настройке
• ⚡ Возможности - Аналитика, пакетная обработка и многое другое
• 🍳 Рецепты - Продвинутые рецепты и паттерны
• ✅ Лучшие практики - Советы и подводные камни