Come si può gestire la cronologia del browser in JavaScript, spostandosi avanti e indietro?

L’oggetto history consente l’accesso alla cronologia delle sessioni del browser. I metodi principali per gestire sono:

• history.back(): torna indietro di una pagina nella cronologia.
• history.forward(): avanza di una pagina nella cronologia.
• history.go(delta): si sposta di un numero specificato di passi nella cronologia (delta può essere negativo per tornare indietro).

Esempio di utilizzo:

// Tornare alla pagina precedente
history.back();

// Andare alla pagina successiva
history.forward();

// Tornare indietro di due pagine
history.go(-2);

// Andare avanti di tre pagine
history.go(3);

Inoltre, l’oggetto history permette di gestire lo stato della cronologia senza ricaricare la pagina, usando i metodi pushState e replaceState.

• history.pushState(state, title, url): aggiunge un nuovo stato alla cronologia della sessione.
  • state: oggetto di stato associato alla voce di cronologia.
  • title: titolo della pagina (la maggior parte dei browser lo ignora).
  • url: URL associato alla voce di cronologia.
• history.replaceState(state, title, url): sostituisce lo stato corrente nella cronologia della sessione.

Esempio con pushState:

// Aggiunta di un nuovo stato alla cronologia
history.pushState({ page: 1 }, "Pagina 1", "/page1");

// Azioni sulla pagina senza ricaricamento completo

// Quando l’utente preme il pulsante "indietro", si attiva l’evento popstate
window.addEventListener('popstate', function(event) {
  console.log('Lo stato è cambiato:', event.state); // { page: 1 }
  // Aggiornare il contenuto della pagina in base allo stato
});

Esempio con replaceState:

// Sostituire lo stato corrente nella cronologia
history.replaceState({ tab: 'active' }, "Scheda attiva", "/active-tab");

L’evento popstate si attiva quando si attiva una voce nella cronologia della sessione.