Как сохранять состояние формы (черновик) при перезагрузке страницы?

Сохранение состояния формы при перезагрузке

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

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

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

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

// Сохранение состояния формы
const form = document.getElementById('myForm');
form.addEventListener('input', () => {
  const formData = new FormData(form);
  const data = Object.fromEntries(formData.entries());
  localStorage.setItem('formDraft', JSON.stringify(data));
});

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

Вывод

Использование localStorage или sessionStorage — простой и эффективный способ сохранить черновик формы. Это особенно полезно в длинных формах, где потеря данных критична, например, в анкетах или заказах.