Jak zarządzać historią przeglądarki w JavaScript, poruszając się do przodu i do tyłu?

Obiekt history zapewnia dostęp do historii sesji przeglądarki. Główne metody do zarządzania to:

• history.back(): cofa o jedną stronę w historii.
• history.forward(): przesuwa o jedną stronę do przodu w historii.
• history.go(delta): przesuwa się o określoną liczbę kroków w historii (delta może być ujemne, aby cofnąć się).

Przykład użycia:

// Powrót do poprzedniej strony
history.back();

// Przejście do następnej strony
history.forward();

// Powrót o dwie strony
history.go(-2);

// Przejście o trzy strony do przodu
history.go(3);

Ponadto obiekt history pozwala zarządzać stanem historii bez przeładowania strony, korzystając z metod pushState i replaceState.

• history.pushState(state, title, url): dodaje nowy stan do historii sesji.
  • state: obiekt stanu powiązany z wpisem w historii.
  • title: tytuł strony (większość przeglądarek go ignoruje).
  • url: URL powiązany z wpisem w historii.
• history.replaceState(state, title, url): zamienia obecny stan w historii sesji.

Przykład z pushState:

// Dodanie nowego stanu do historii
history.pushState({ page: 1 }, "Strona 1", "/page1");

// Dalsze działania na stronie bez pełnego przeładowania

// Po kliknięciu przycisku "wstecz" użytkownika, zostanie wywołane zdarzenie popstate
window.addEventListener('popstate', function(event) {
  console.log('Stan się zmienił:', event.state); // { page: 1 }
  // Aktualizacja zawartości strony zgodnie ze stanem
});

Przykład z replaceState:

// Zamiana obecnego stanu w historii
history.replaceState({ tab: 'active' }, "Aktywna zakładka", "/active-tab");

Zdarzenie popstate wywołuje się przy aktywacji wpisu w historii sesji.