╔═══════════════════════════════════════════════════════════════════╗ ║ ║ ║ ███████╗ ██████╗ ██████╗ ███╗ ███╗ ║ ║ ██╔════╝██╔═══██╗██╔══██╗████╗ ████║ ║ ║ █████╗ ██║ ██║██████╔╝██╔████╔██║ ║ ║ ██╔══╝ ██║ ██║██╔══██╗██║╚██╔╝██║ ║ ║ ██║ ╚██████╔╝██║ ██║██║ ╚═╝ ██║ ║ ║ ╚═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝ ║ ║ ║ ║ ██████╗ ██╗ ██╗ █████╗ ██████╗ ██████╗ ██╗ █████╗ ███╗ ██╗ ║ ║ ██╔════╝ ██║ ██║██╔══██╗██╔══██╗██╔══██╗██║██╔══██╗████╗ ██║ ║ ║ ██║ ███╗██║ ██║███████║██████╔╝██║ ██║██║███████║██╔██╗ ██║ ║ ║ ██║ ██║██║ ██║██╔══██║██╔══██╗██║ ██║██║██╔══██║██║╚██╗██║ ║ ║ ╚██████╔╝╚██████╔╝██║ ██║██║ ██║██████╔╝██║██║ ██║██║ ╚████║ ║ ║ ╚═════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ║ ║ ║ ╚═══════════════════════════════════════════════════════════════════╝
Form Guardian
> Универсальное решение для автосохранения форм
// Работает с любой библиотекой форм или ванильным HTML
> Возможности
// Всё, что нужно для надежного автосохранения форм
Универсальность
Работает с любой формой - React, Vue, Angular или ванильный HTML. Не требует зависимостей от библиотек форм.
IndexedDB Storage
Надежное хранение черновиков в браузере. Данные сохраняются даже после закрытия вкладки.
React Hooks
Готовые хуки для React приложений. Простая интеграция с react-hook-form, Formik и другими библиотеками.
Безопасность
Автоматическое исключение чувствительных полей (пароли, токены, API ключи). Настраиваемые blacklist и whitelist.
TTL (Time To Live)
Автоматическое истечение черновиков через заданное время. Настраивается в днях, часах и минутах.
Debounce
Оптимизация производительности через debounce. Сохранение происходит только после паузы в вводе.
Предотвращение конфликтов
Автоматическая блокировка сохранения во время восстановления. Защита от перезаписи данных.
Zero Dependencies
Ядро библиотеки не требует зависимостей. Работает с чистым JavaScript и TypeScript.
Analytics Events
Полный набор событий для аналитики: onBeforeSave, onAfterSave, onBeforeRestore, onAfterRestore, onDraftExpired. Интеграция с системами трекинга.
Batching
Оптимизация производительности через батчинг. Сохранение изменений пачками (1 раз в X секунд) для снижения нагрузки на IndexedDB.
Draft Status Hook
Легковесный React хук useDraftStatus для получения статуса черновика без взаимодействия с DOM. Отслеживание состояния в реальном времени.
> Как это работает
// Простой и надежный механизм автосохранения
1. Отслеживание DOM событий
Библиотека слушает события input и change напрямую в DOM, не завися от состояния библиотек форм
2. Сохранение только пользовательского ввода
Сохраняются только реальные изменения пользователя. Начальные значения (defaultValues) не триггерят сохранение
3. Восстановление в DOM
Черновики восстанавливаются напрямую в DOM элементы, что работает с любой библиотекой форм
4. Защита от конфликтов
Автоматическая блокировка сохранения во время восстановления предотвращает перезапись данных
> Примеры
// Интерактивные примеры для разных сценариев
Vanilla JavaScript Example
Реализация на чистом JavaScript без использования фреймворков. Демонстрирует прямую работу с DOM через Form Guardian.
React Plain Form
Базовая React форма с использованием контролируемых компонентов через useState. Простая интеграция с Form Guardian.
React Hook Form Integration
Интеграция с популярной библиотекой React Hook Form. Объединяет валидацию с автоматическим сохранением черновиков.
Formik Integration
Беспроблемная интеграция с библиотекой форм Formik. Автоматическое сохранение для форм Formik с валидацией.
useFormAutosave Hook
Кастомный React хук для автосохранения форм. Гибкое и мощное решение с отслеживанием статуса черновика.