Зачем использовать черновое сохранение формы и как его реализовать?

Зачем нужно черновое сохранение формы

Черновое сохранение (draft saving) решает проблему потери данных при незавершенном заполнении формы. Пользователь может случайно закрыть вкладку, перезагрузить страницу или столкнуться с ошибкой сети. Без сохранения черновика все введенные данные пропадают, что вызывает раздражение и снижает конверсию. Особенно это критично для длинных форм: регистрация, оформление заказа, создание сложных объектов.

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

Основная идея — сохранять состояние формы в локальном хранилище браузера (localStorage) при каждом изменении. При загрузке страницы проверяем наличие сохраненных данных и восстанавливаем их. Для этого подписываемся на события изменения полей (input, change) и периодически записываем текущее состояние формы в JSON-строку.

Пример реализации на JavaScript

const FORM_KEY = 'draft_form_data';

function saveDraft(formData) {
  localStorage.setItem(FORM_KEY, JSON.stringify(formData));
}

function loadDraft() {
  const data = localStorage.getItem(FORM_KEY);
  return data ? JSON.parse(data) : null;
}

function clearDraft() {
  localStorage.removeItem(FORM_KEY);
}

// Сохранение при изменении полей
document.querySelectorAll('input, textarea, select').forEach(el => {
  el.addEventListener('input', () => {
    const formData = new FormData(document.getElementById('myForm'));
    saveDraft(Object.fromEntries(formData));
  });
});

// Восстановление при загрузке
window.addEventListener('DOMContentLoaded', () => {
  const draft = loadDraft();
  if (draft) {
    Object.entries(draft).forEach(([name, value]) => {
      const field = document.querySelector(`[name="${name}"]`);
      if (field) field.value = value;
    });
  }
});

// Очистка после успешной отправки
document.getElementById('myForm').addEventListener('submit', clearDraft);

Где применяется

• Формы регистрации и входа
• Редакторы контента (блоги, CMS)
• Многошаговые формы (wizard)
• Корзина интернет-магазина

Вывод: черновое сохранение — простой и эффективный способ улучшить UX, особенно для длинных или критичных форм. Реализация через localStorage не требует серверной поддержки и легко интегрируется в любой проект.