Le bouton Précédent — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 12)

Le bouton Précédent

Projet : la Librairie interactive · niveau 3 (difficile)

Énoncé

Avec replaceState, le bouton Précédent du navigateur quitte le catalogue au lieu de revenir au tri précédent. Modifier la gestion du tri pour que chaque tri choisi crée une entrée d'historique, et que Précédent rétablisse le tri d'avant. Pourquoi ne faut-il pas faire de même pour chaque frappe dans le champ de recherche ?

Corrigé


function lireTri() {
  return new URLSearchParams(location.search).get("tri") ?? "titre";
}

function afficher() {
  tri.value = lireTri();
  etat.textContent = `Catalogue trié par : ${tri.selectedOptions[0].textContent}.`;
}

tri.addEventListener("change", () => {
  history.pushState(null, "", `?tri=${encodeURIComponent(tri.value)}`);
  afficher();
});
window.addEventListener("popstate", afficher);
afficher();

pushState crée une entrée d'historique par tri ; Précédent ne recharge pas la page, mais déclenche popstate après avoir rétabli l'adresse : afficher n'a qu'à la relire. Vérifié dans Chromium (exercices/ex5-precedent/) : après les tris « Auteur » puis « Prix croissant », Précédent ramène à « Auteur », puis au tri par titre, sans paramètre. Pour la recherche, une entrée par frappe remplirait l'historique de « j », « ja », « jav », « java » : il faudrait appuyer quatre fois sur Précédent pour quitter la page. On garde replaceState pour la frappe.