Jak lze v JavaScriptu spravovat historii prohlížeče, pohybem vpřed a vzad?

Objekt history poskytuje přístup k historii relace prohlížeče. Hlavní metody pro správu jsou:

• history.back(): vrátí o jednu stránku zpět v historii.
• history.forward(): posune o jednu stránku vpřed v historii.
• history.go(delta): přesune se o zadaný počet kroků v historii (delta může být záporné pro návrat zpět).

Příklad použití:

// Návrat na předchozí stránku
history.back();

// Přechod na následující stránku
history.forward();

// Návrat o dvě stránky zpět
history.go(-2);

// Přechod o tři stránky vpřed
history.go(3);

Také objekt history umožňuje spravovat stav historie bez nutnosti znovunačtení stránky, pomocí metod pushState a replaceState.

• history.pushState(state, title, url): přidá nový stav do historie relace.
  • state: objekt stavu spojený s položkou historie.
  • title: název stránky (většina prohlížečů ho ignoruje).
  • url: URL spojené s položkou historie.
• history.replaceState(state, title, url): nahradí aktuální stav v historii relace.

Příklad s pushState:

// Přidání nového stavu do historie
history.pushState({ page: 1 }, "Stránka 1", "/page1");

// Akce na stránce bez úplného znovunačtení

// Při kliknutí uživatele na tlačítko "zpět" se aktivuje událost popstate
window.addEventListener('popstate', function(event) {
  console.log('Stav se změnil:', event.state); // { page: 1 }
  // Aktualizace obsahu stránky podle stavu
});

Příklad s replaceState:

// Nahrazení aktuálního stavu v historii
history.replaceState({ tab: 'active' }, "Aktivní záložka", "/active-tab");

Událost popstate se aktivuje při aktivaci záznamu historie relace.