Как бы вы хранили данные формы, чтобы пользователь мог вернуться к заполнению после перезагрузки страницы или закрытия вкладки, без авторизации?

Зачем сохранять данные формы

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

Основные варианты хранения

• localStorage — данные сохраняются бессрочно, даже после закрытия браузера. Подходит, если нужно восстановить форму через несколько дней.
• sessionStorage — данные живут до закрытия вкладки или браузера. Если пользователь случайно обновил страницу, данные сохранятся, но после полного закрытия браузера они исчезнут.

Оба хранилища работают только с текстовыми строками, поэтому объекты нужно сериализовать в JSON.

Практическая реализация

Слушаем события ввода на полях формы и сохраняем текущее состояние в localStorage. При загрузке страницы проверяем наличие сохранённых данных и заполняем форму.

const form = document.getElementById('myForm');
const STORAGE_KEY = 'formDraft';

// Сохраняем данные при каждом изменении
form.addEventListener('input', () => {
  const data = new FormData(form);
  const obj = Object.fromEntries(data.entries());
  localStorage.setItem(STORAGE_KEY, JSON.stringify(obj));
});

// Восстанавливаем данные при загрузке
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    const obj = JSON.parse(saved);
    for (const [name, value] of Object.entries(obj)) {
      const field = form.elements[name];
      if (field) field.value = value;
    }
  }
});

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

Когда применять

Используйте localStorage, если пользователь может вернуться к форме позже (например, через день). Если достаточно сохранить данные только при случайной перезагрузке текущей сессии, выбирайте sessionStorage. Для больших форм или чувствительных данных стоит рассмотреть хранение на сервере с черновиками, но это уже требует авторизации.

Итог: клиентское хранилище — лёгкий и эффективный способ сохранить прогресс заполнения формы без авторизации, улучшая пользовательский опыт.