Comment gérer l'historique du navigateur en JavaScript, en avançant et en revenant?

L’objet history donne accès à l’historique des sessions du navigateur. Les méthodes principales pour gérer l’historique sont :

• history.back(): revient d’une page en arrière dans l’historique.
• history.forward(): avance d’une page dans l’historique.
• history.go(delta): se déplace du nombre de pas spécifié dans l’historique (delta peut être négatif pour revenir en arrière).

Exemple d’utilisation :

// Retour à la page précédente
history.back();

// Aller à la page suivante
history.forward();

// Revenir de deux pages
history.go(-2);

// Avancer de trois pages
history.go(3);

De plus, l’objet history permet de gérer l’état de l’historique sans recharger la page, en utilisant les méthodes pushState et replaceState.

• history.pushState(state, title, url): ajoute un nouvel état à l’historique de la session.
  • state: objet d’état associé à l’entrée de l’historique.
  • title: titre de la page (la plupart des navigateurs l’ignorent).
  • url: URL associé à l’entrée de l’historique.
• history.replaceState(state, title, url): remplace l’état actuel dans l’historique de la session.

Exemple avec pushState :

// Ajouter un nouvel état à l’historique
history.pushState({ page: 1 }, "Page 1", "/page1");

// Effectuer des actions sur la page sans rechargement complet

// Lorsqu’un utilisateur appuie sur le bouton "retour", l’événement popstate sera déclenché
window.addEventListener('popstate', function(event) {
  console.log('L’état a changé :', event.state); // { page: 1 }
  // Mettre à jour le contenu de la page en fonction de l’état
});

Exemple avec replaceState :

// Remplacer l’état actuel dans l’historique
history.replaceState({ tab: 'active' }, "Onglet actif", "/active-tab");

L’événement popstate se déclenche lors de l’activation d’une entrée dans l’historique de la session.