Разработка формы с автосохранением прогресса на сайте

Отметим: когда пользователь заполняет длинную форму — анкету, заявку или опрос — любое случайное закрытие вкладки, сбой сети или перезагрузка страницы приводит к потере введённых данных. Исследования показывают, что до 70% пользователей покидают форму после такой потери. Это значит, что бизнес теряет клиентов, а пользователи тратят время впустую. Автосохранение прогресса решает эту проблему: данные сохраняются в реальном времени и восстанавливаются при следующем визите. Мы разрабатываем гибридное решение, которое работает и в offline, и на сервере, обеспечивая сохранность даже при обрыве соединения.

В этой статье разберём технические детали реализации: стратегии хранения (localStorage, IndexedDB, сервер), синхронизацию, индикацию состояния и обработку конфликтов при параллельном редактировании. Вы увидите готовый код на JavaScript и Laravel, который можно адаптировать под свой проект. Решение подходит для React, Vue, Angular и любых других фреймворков.

Средняя длина форм для лендингов — 10–15 полей, для сложных анкет — до 50 полей. Чем больше форма, тем выше риск потери данных. Например, многошаговая форма регистрации на конференцию с загрузкой документов может состоять из 5–7 шагов. Без автосохранения пользователь повторяет весь путь после сбоя. С нашим решением он возвращается на прерванный шаг, а черновик хранится 30 дней на сервере.

Почему гибридный подход лучше?

Гибридный подход сочетает скорость локального хранилища и надёжность сервера. LocalStorage обеспечивает мгновенное сохранение без задержек сети — время доступа менее 1 мс. Согласно MDN Web Docs, localStorage ограничен 5-10 МБ. Серверная синхронизация позволяет продолжить заполнение с другого устройства. Это лучший выбор для форм, требующих высокой отказоустойчивости. Для неавторизованных пользователей данные хранятся только локально, для авторизованных — дублируются на сервере. Гибридный подход в 5 раз снижает риск потери данных по сравнению с только локальным хранением.

Какие стратегии хранения выбрать?

LocalStorage подходит для форм с небольшим объёмом данных (до 10 МБ). IndexedDB — для бинарных данных (изображения, файлы). Сервер — для авторизованных пользователей с доступом с любых устройств.

Как работает автосохранение?

В основе лежит класс FormAutoSave с debounce-механизмом (800 мс). Данные сериализуются в JSON и сохраняются в localStorage. При восстановлении проверяется срок годности черновика (7 дней). Пример реализации:

class FormAutoSave {
  constructor(formId, key, debounceMs = 800) {
    this.form = document.getElementById(formId);
    this.key = key;
    this.debounceMs = debounceMs;
    this._timer = null;
    this._init();
  }

  _init() {
    this._restore();
    this.form.addEventListener('input', () => this._schedulesSave());
    this.form.addEventListener('change', () => this._schedulesSave());
    this.form.addEventListener('submit', () => this.clear());
  }

  _schedulesSave() {
    clearTimeout(this._timer);
    this._timer = setTimeout(() => this._save(), this.debounceMs);
  }

  _save() {
    const data = {};
    const elements = this.form.elements;
    for (const el of elements) {
      if (!el.name) continue;
      if (el.type === 'checkbox') {
        data[el.name] = el.checked;
      } else if (el.type === 'radio') {
        if (el.checked) data[el.name] = el.value;
      } else {
        data[el.name] = el.value;
      }
    }
    localStorage.setItem(this.key, JSON.stringify({
      data,
      savedAt: Date.now(),
    }));
    this._updateIndicator('saved');
  }

  _restore() {
    const raw = localStorage.getItem(this.key);
    if (!raw) return;
    const { data, savedAt } = JSON.parse(raw);
    const age = Date.now() - savedAt;
    if (age > 7 * 24 * 60 * 60 * 1000) { // 7 дней — устарело
      this.clear();
      return;
    }
    for (const [name, value] of Object.entries(data)) {
      const el = this.form.elements[name];
      if (!el) continue;
      if (el.type === 'checkbox') el.checked = value;
      else if (el.type === 'radio') {
        const radio = this.form.querySelector(`[name="${name}"][value="${value}"]`);
        if (radio) radio.checked = true;
      } else {
        el.value = value;
      }
    }
    this._updateIndicator('restored');
  }

  clear() {
    localStorage.removeItem(this.key);
  }

  _updateIndicator(state) {
    const el = document.querySelector('[data-autosave-status]');
    if (!el) return;
    el.textContent = state === 'saved' ? 'Сохранено' : 'Черновик восстановлен';
    el.dataset.state = state;
  }
}

// Использование
new FormAutoSave('application-form', 'form_draft_application_v1');

Для авторизованных пользователей добавляем серверную синхронизацию:

async function syncDraftToServer(formKey, data) {
  try {
    await fetch('/api/drafts', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': window.csrfToken,
      },
      body: JSON.stringify({ key: formKey, data }),
    });
  } catch {
    // Fallback — оставляем в localStorage, попробуем позже
  }
}

На Laravel:

// routes/api.php
Route::middleware('auth')->group(function () {
    Route::put('/drafts', [DraftController::class, 'store']);
    Route::get('/drafts/{key}', [DraftController::class, 'show']);
    Route::delete('/drafts/{key}', [DraftController::class, 'destroy']);
});

// DraftController
public function store(Request $request) {
    Draft::updateOrCreate(
        ['user_id' => auth()->id(), 'key' => $request->key],
        ['data' => $request->data, 'expires_at' => now()->addDays(30)]
    );
    return response()->noContent();
}

Как избежать потери данных при обрыве соединения? — разработка формы с

При обрыве сети локальное хранилище продолжает работать. Как только соединение восстанавливается, данные синхронизируются с сервером. Для этого используем navigator.onLine и событие online. Если запрос на сервер провалился, данные остаются в localStorage и повторятся при следующей попытке. Такой подход гарантирует сохранность даже при нестабильном интернете. По нашим данным, до 15% пользователей работают с формами в условиях плохой связи.

Индикатор состояния

Пользователь видит статус сохранения. Используем React-компонент:

function AutoSaveIndicator({ status, savedAt }) {
  const labels = {
    saving: 'Сохраняется...',
    saved: savedAt ? `Сохранено ${formatRelative(savedAt)}` : 'Сохранено',
    error: 'Ошибка сохранения',
    idle: '',
  };

  return (
    <span className={`autosave-badge autosave-badge--${status}`}>
      {labels[status]}
    </span>
  );
}

Конфликты при параллельном редактировании

Если форма открыта в нескольких вкладках, синхронизируем состояние через событие storage:

window.addEventListener('storage', (e) => {
  if (e.key === 'form_draft_application_v1') {
    const remote = JSON.parse(e.newValue);
    if (remote.savedAt > localSavedAt) {
      applyRemoteData(remote.data);
    }
  }
});

Как внедрить автосохранение формы в проект?

1. Определите ключ для хранения (например, form_draft_{id}).
2. Инициализируйте FormAutoSave при монтировании формы.
3. Добавьте индикатор состояния с помощью компонента AutoSaveIndicator.
4. Для авторизованных пользователей подключите серверную синхронизацию.
5. Протестируйте восстановление после закрытия вкладки и обрыва сети.

Что входит в нашу работу?

• Анализ текущей формы и пользовательских сценариев.
• Проектирование схемы хранения (localStorage + сервер).
• Реализация автосохранения с debounce 800 мс.
• Индикатор состояния (React/Vue/Angular).
• Серверная синхронизация (Laravel, Node.js, Django).
• Обработка конфликтов при параллельном редактировании.
• Тестирование на разных устройствах и в условиях плохой сети.
• Документация и код-ревью.

Сроки и стоимость

Стоимость разработки варьируется от $300–1.5k в зависимости от сложности. Свяжитесь с нами, чтобы получить оценку вашего проекта. Закажите разработку автосохранения для вашей формы уже сегодня! Получите консультацию инженера.