Сохранение состояния

Shepherd.js предоставляет удобный механизм создания интерактивных пошаговых руководств, но для сложных приложений важно сохранять прогресс пользователя между сессиями. Это позволяет возобновлять тур с того места, на котором пользователь остановился, а также адаптировать опыт под индивидуальные действия.

Использование события complete и cancel

Каждый тур в Shepherd.js поддерживает события, которые могут быть использованы для сохранения состояния:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows'
  }
});

tour.addStep({
  id: 'step-1',
  text: 'Первый шаг тура',
  attachTo: { element: '#step1', on: 'bottom' },
});

tour.on('complete', () => {
  localStorage.setItem('tourState', 'completed');
});

tour.on('cancel', () => {
  localStorage.setItem('tourState', 'cancelled');
});

Здесь localStorage используется для постоянного хранения состояния. Можно использовать и sessionStorage для хранения только в рамках текущей сессии.

Отслеживание текущего шага

Для возможности возобновления тура с конкретного шага необходимо сохранять индекс текущего шага при каждом переходе:

tour.on('show', (event) => {
  const currentStepId = event.step.id;
  localStorage.setItem('currentStep', currentStepId);
});

При следующем запуске тура можно проверить сохранённое значение и вызвать tour.show() с соответствующим шагом:

const savedStepId = localStorage.getItem('currentStep');
if (savedStepId) {
  tour.start();
  const step = tour.getById(savedStepId);
  if (step) step.show();
} else {
  tour.start();
}

Интеграция с сервером

Если требуется сохранять состояние для пользователя между устройствами, можно использовать API-запросы на сервер:

tour.on('show', (event) => {
  const stepId = event.step.id;
  fetch('/api/save-tour-progress', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userId: '123', stepId })
  });
});

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

Сохранение пользовательских выборов

Shepherd.js позволяет добавлять кастомные кнопки с функциями. Состояние этих действий также можно сохранять:

tour.addStep({
  id: 'step-2',
  text: 'Выберите вариант:',
  attachTo: { element: '#step2', on: 'top' },
  buttons: [
    {
      text: 'Вариант A',
      action: () => {
        localStorage.setItem('choiceStep2', 'A');
        tour.next();
      }
    },
    {
      text: 'Вариант B',
      action: () => {
        localStorage.setItem('choiceStep2', 'B');
        tour.next();
      }
    }
  ]
});

Позже можно прочитать localStorage и адаптировать интерфейс на основании сделанного выбора.

Очистка состояния

Для сброса тура после его завершения или по запросу пользователя необходимо удалять сохранённые данные:

tour.on('complete', () => {
  localStorage.removeItem('currentStep');
  localStorage.removeItem('choiceStep2');
  localStorage.setItem('tourState', 'completed');
});

tour.on('cancel', () => {
  localStorage.clear();
});

Такой подход предотвращает конфликт старого состояния с новым запуском тура.

Работа с динамическими шагами

Если шаги тура создаются динамически, полезно хранить состояние в формате массива:

const stepsState = [];

tour.on('show', (event) => {
  const stepIndex = tour.steps.indexOf(event.step);
  if (!stepsState.includes(stepIndex)) {
    stepsState.push(stepIndex);
    localStorage.setItem('stepsState', JSON.stringify(stepsState));
  }
});

Это позволяет восстановить все просмотренные шаги и управлять прогрессом более гибко.

Практические советы

  • Всегда сохранять только минимально необходимое состояние (например, идентификатор шага и ключевые пользовательские выборы).
  • Использовать JSON.stringify и JSON.parse для хранения сложных объектов в localStorage.
  • Для больших приложений интегрировать серверное хранение, чтобы синхронизировать прогресс между устройствами.
  • Обновлять состояние при каждом важном действии пользователя, а не только при завершении тура, чтобы снизить риск потери данных.

Система сохранения состояния в Shepherd.js позволяет создавать гибкие и персонализированные туры, повышая удобство взаимодействия пользователя с приложением и улучшая UX.

Оглавление