Ako v JavaScripte spravovať históriu prehliadača, pohybovaním dopredu a dozadu?

Objekt history poskytuje prístup k histórii relácie prehliadača. Hlavné metódy na správu sú:

• history.back(): vráti o jednu stránku späť v histórii.
• history.forward(): posunie o jednu stránku dopredu v histórii.
• history.go(delta): pohne sa o zadaný počet krokov v histórii (delta môže byť záporné na návrat späť).

Príklad použitia:

// Návrat na predchádzajúcu stránku
history.back();

// Prechod na nasledujúcu stránku
history.forward();

// Návrat o dve stránky späť
history.go(-2);

// Dopredu o tri stránky
history.go(3);

Okrem toho, objekt history umožňuje spravovať stav histórie bez načítania stránky, pomocou metód pushState a replaceState.

• history.pushState(state, title, url): pridá nový stav do histórie relácie.
  • state: objekt stavu spojený s položkou histórie.
  • title: názov stránky (väčšina prehliadačov ho ignoruje).
  • url: URL spojené s položkou histórie.
• history.replaceState(state, title, url): nahradí aktuálny stav v histórii relácie.

Príklad s pushState:

// Pridanie nového stavu do histórie
history.pushState({ page: 1 }, "Stránka 1", "/page1");

// Akcie na stránke bez úplného načítania

// Keď používateľ klikne na tlačidlo "späť", aktivuje sa udalosť popstate
window.addEventListener('popstate', function(event) {
  console.log('Stav sa zmenil:', event.state); // { page: 1 }
  // Aktualizácia obsahu stránky podľa stavu
});

Príklad s replaceState:

// Nahradenie aktuálneho stavu v histórii
history.replaceState({ tab: 'active' }, "Aktívna záložka", "/active-tab");

Udalosť popstate sa aktivuje pri aktivácii záznamu v histórii relácie.