Как в JavaScript можно управлять историей браузера, перемещаясь вперед и назад?

Объект history предоставляет доступ к истории сеансов браузера. Основные методы для управления:

• history.back(): Перемещает назад на одну страницу в истории.
• history.forward(): Перемещает вперед на одну страницу в истории.
• history.go(delta): Перемещает на указанное количество шагов в истории (delta может быть отрицательным для перемещения назад).

Пример использования:

// Возврат на предыдущую страницу
history.back();

// Переход на следующую страницу
history.forward();

// Переход на две страницы назад
history.go(-2);

// Переход на три страницы вперед
history.go(3);

Также объект history позволяет управлять состоянием истории без перезагрузки страницы, используя методы pushState и replaceState.

• history.pushState(state, title, url): Добавляет новое состояние в историю сеанса.
  • state: Объект состояния, связанный с записью истории.
  • title: Заголовок страницы (игнорируется большинством браузеров).
  • url: URL, связанный с записью истории.
• history.replaceState(state, title, url): Заменяет текущее состояние в истории сеанса.

Пример с pushState:

// Добавление нового состояния в историю
history.pushState({ page: 1 }, "Страница 1", "/page1");

// Дальнейшие действия на странице без полной перезагрузки

// При нажатии пользователем кнопки "назад", сработает событие popstate
window.addEventListener('popstate', function(event) {
  console.log('Состояние изменилось:', event.state); // { page: 1 }
  // Обновление контента страницы в соответствии с состоянием
});

Пример с replaceState:

// Замена текущего состояния в истории
history.replaceState({ tab: 'active' }, "Активная вкладка", "/active-tab");

Событие popstate срабатывает при активации записи истории сеанса.