Le brouillon du formulaire — exercice corrigé de JavaScript : rendre le Web interactif (école d'ingénieur) (chapitre 12)

Le brouillon du formulaire

Projet : la Librairie interactive · niveau 2

Énoncé

Un client remplit son nom et son adresse, part vérifier un livre dans le catalogue, revient : tout est à retaper. Garder la saisie dans un brouillon, restauré à l'ouverture de la page et effacé une fois la commande acceptée. Quel stockage choisir, et pourquoi pas l'autre ?

Corrigé


const CLE = "librairie.brouillon";
const formulaire = document.querySelector("#form-commande");

function lire() {
  try {
    return JSON.parse(sessionStorage.getItem(CLE)) ?? {};
  } catch {
    return {};
  }
}

const brouillon = lire();
for (const champ of formulaire.elements) {
  if (champ.name && typeof brouillon[champ.name] === "string") {
    champ.value = brouillon[champ.name];
  }
}

formulaire.addEventListener("input", () => {
  const donnees = Object.fromEntries(new FormData(formulaire));
  try {
    sessionStorage.setItem(CLE, JSON.stringify(donnees));
  } catch {
    // pas de brouillon : tant pis, rien ne casse
  }
});

Après l'acceptation de la commande, on efface la clé (sessionStorage.removeItem(CLE)). sessionStorage : le brouillon n'a de sens que pour cette visite, et il contient des données personnelles qui ne doivent pas rester sur un ordinateur, peut-être partagé, après la fermeture de l'onglet. Vérifié dans Chromium : la saisie survit au rechargement, n'est pas visible d'un autre onglet, et disparaît après l'envoi. JSON.parse(null) vaut null, d'où le ?? {}.