Hogyan lehet a böngésző történetét kezelni JavaScriptben, előre és hátra navigálva?

A history objektum hozzáférést biztosít a böngésző munkamenet történetéhez. A fő módszerek a következők:

• history.back(): egy oldallal visszalép a történelemben.
• history.forward(): egy oldallal előre lép a történelemben.
• history.go(delta): a megadott lépésszámú helyre navigál a történelemben (delta lehet negatív is, visszafelé).

Használati példa:

// Vissza az előző oldalra
history.back();

// Előre a következő oldalra
history.forward();

// Két oldal vissza
history.go(-2);

// Három oldal előre
history.go(3);

Ezenkívül a history objektum lehetővé teszi a történelem állapotának kezelését oldal újratöltése nélkül, a pushState és replaceState metódusok segítségével.

• history.pushState(state, title, url): új állapotot ad hozzá a munkamenet történetéhez.
  • state: az állapotobjektum, ami a történelembe kerül.
  • title: az oldal címe (a legtöbb böngésző ezt figyelmen kívül hagyja).
  • url: az URL, ami a történelembe kerül.
• history.replaceState(state, title, url): a jelenlegi állapotot cseréli a történelemben.

Példa a pushState-tel:

// Új állapot hozzáadása
history.pushState({ page: 1 }, "Oldal 1", "/page1");

// Oldal műveletek teljes oldal újratöltése nélkül

// Amikor a felhasználó a "vissza" gombra kattint, a `popstate` esemény aktiválódik
window.addEventListener('popstate', function(event) {
  console.log('Az állapot megváltozott:', event.state); // { page: 1 }
  // A tartalom frissítése az állapotnak megfelelően
});

Példa a replaceState-tel:

// A jelenlegi állapot cseréje
history.replaceState({ tab: 'active' }, "Aktív lap", "/active-tab");

A popstate esemény akkor aktiválódik, amikor egy munkamenet-állapot bejegyzés aktiválódik.