Un thème mémorisé — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 11)

Un thème mémorisé

Erreurs, stockage et qualité du code · niveau 2

Énoncé

La feuille de style de la Librairie suit le thème du système, mais accepte un attribut data-theme="clair" ou "sombre" sur l'élément <html>. Une page offre une liste « Thème » à trois choix : « Comme le système » (valeur vide), « Clair », « Sombre ». Écrire le script qui applique le choix, le mémorise, et le réapplique à la visite suivante, même si le stockage est indisponible. Faut-il localStorage ou sessionStorage ?

Corrigé


const CLE = "librairie.theme";
const choix = document.querySelector("#theme");

function lireTheme() {
  try {
    return localStorage.getItem(CLE) ?? "";
  } catch {
    return ""; // stockage indisponible : on suit le système
  }
}

function appliquer(theme) {
  if (theme) {
    document.documentElement.dataset.theme = theme;
  } else {
    delete document.documentElement.dataset.theme;
  }
}

const theme = lireTheme();
appliquer(theme);
choix.value = theme;

choix.addEventListener("change", () => {
  appliquer(choix.value);
  try {
    localStorage.setItem(CLE, choix.value);
  } catch {
    // le choix vaut pour cette visite seulement
  }
});

Ici, un catch sans variable (ES2019) est légitime : le seul traitement possible est de continuer sans mémoriser, et le commentaire le dit. Le thème est une préférence durable : localStorage. La page exercices/ex4-theme/ applique ce script.