Черновики и автосохранение форм

Idb-keyval — это легковесная обертка над IndexedDB, предназначенная для упрощения операций с асинхронным хранилищем ключ–значение в браузере. Она идеально подходит для реализации черновиков и автосохранения данных форм, так как позволяет хранить объёмные объекты без необходимости ручного управления транзакциями и схемой IndexedDB.

Основной принцип работы библиотеки заключается в хранении объектов JavaScript напрямую под уникальными ключами. Это даёт возможность асинхронно сохранять состояние формы и восстанавливать его при следующем посещении страницы.

Подключение и базовые функции

Idb-keyval можно подключить через npm или CDN:

import { set, get, del, upd ate } from 'idb-keyval';

Ключевые функции:

  • set(key, value) — сохраняет значение под указанным ключом.
  • get(key) — возвращает значение по ключу, если оно существует.
  • del(key) — удаляет запись.
  • upd ate(key, updater) — обновляет существующее значение с помощью функции обновления.

Пример сохранения состояния формы:

const formState = {
    name: 'Иван',
    email: 'ivan@example.com',
    message: 'Привет!'
};

se t('contactForm', formState);

Для получения данных:

get('contactForm').then(data => {
    if (data) {
        console.log(data.name); // Иван
    }
});

Организация автосохранения форм

Автосохранение реализуется через события изменения полей формы и периодическое сохранение состояния. Для этого используют обработчики событий input или change.

Пример:

const form = document.querySelector('#contactForm');

form.addEventListener('input', () => {
    const formData = {
        name: form.name.value,
        email: form.email.value,
        message: form.message.value
    };
    se t('contactForm', formData);
});

Это обеспечивает сохранение каждого изменения без задержек, а данные остаются доступными даже при перезагрузке страницы или неожиданном закрытии браузера.

Восстановление черновиков

Для восстановления данных используется функция get. После загрузки страницы можно автоматически заполнить форму:

get('contactForm').then(data => {
    if (data) {
        form.name.value = data.name || '';
        form.email.value = data.email || '';
        form.message.value = data.message || '';
    }
});

Важно проверять наличие данных, так как get возвращает undefined, если ключ не существует.

Обновление отдельных полей

Idb-keyval предоставляет функцию update, которая позволяет модифицировать конкретные поля без необходимости перезаписывать весь объект:

upd ate('contactForm', oldData => ({
    ...oldData,
    message: 'Новое сообщение'
}));

Это особенно полезно для больших форм, где частые изменения затрагивают только отдельные поля.

Очистка черновиков

Для удаления данных черновика после успешной отправки формы используется del:

form.addEventListener('submit', event => {
    event.preventDefault();
    // Отправка формы на сервер
    del('contactForm');
});

Таким образом, хранилище остаётся чистым, и прошлые черновики не будут мешать новым.

Управление несколькими формами

Idb-keyval легко масштабируется для нескольких форм. Рекомендуется использовать уникальные ключи для каждой формы:

set('settingsForm', settingsData);
se t('profileForm', profileData);

При восстановлении данных форм достаточно вызвать get с соответствующим ключом. Это позволяет хранить черновики нескольких страниц или секций интерфейса независимо друг от друга.

Асинхронные операции и производительность

Все операции с Idb-keyval асинхронные. Важно учитывать, что:

  • set и update возвращают промис, который разрешается после завершения записи.
  • get и del также возвращают промис.

Для высоконагруженных форм рекомендуется дебаунсинг событий ввода, чтобы не выполнять запись в IndexedDB слишком часто:

let timeout;
form.addEventListener('input', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        const data = {
            name: form.name.value,
            email: form.email.value,
            message: form.message.value
        };
        set('contactForm', data);
    }, 300);
});

Работа с нестандартными объектами

Idb-keyval автоматически сериализует объекты в формат JSON, поэтому можно хранить масивы, объекты, числа, строки, boolean, но стоит избегать функций и DOM-элементов, так как они не сериализуются корректно. Для хранения изображений или файлов можно использовать Blob или ArrayBuffer.

Продвинутые приёмы

  • Версионирование черновиков: можно хранить несколько версий формы с разными ключами, например contactForm_v1, contactForm_v2. Это позволяет откатываться к предыдущей версии.
  • Синхронизация с сервером: перед отправкой данных на сервер можно проверить существование черновика и объединять данные локально и на сервере.
  • Множественные хранилища: Idb-keyval поддерживает создание собственного хранилища через createStore(name, storeName), что полезно для изоляции данных разных модулей.

Idb-keyval предоставляет лёгкий и гибкий инструмент для реализации черновиков и автосохранения форм, позволяя хранить сложные объекты асинхронно, без лишней нагрузки и сложной работы с IndexedDB напрямую.

Оглавление