Как в 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 се активира при активиране на запис в историята на сесията.