LocalStorage

Objectif de la semaine : stocker et relire des données avec localStorage.

Méthode recommandée : teste le cycle complet: écrire, lire, modifier, supprimer. Avancez par petites étapes et testez chaque changement immédiatement.

Le LocalStorage est un espace de stockage dans le navigateur qui permet de conserver des données entre les visites, sans serveur et sans expiration.

L'API localStorage travaille toujours avec des chaînes. Chaque entrée est une paire clé → valeur.

Écrire des valeurs (setItem)

setItem enregistre ou remplace une valeur pour une clé donnée. Les nombres doivent être convertis en chaîne avant stockage.

localStorage.setItem('prenom', 'Marie');
localStorage.setItem('theme', 'sombre');
localStorage.setItem('compteur', '42'); // nombre stocké comme string

Lire des valeurs (getItem)

getItem retourne la chaîne associée à la clé, ou null si la clé n'existe pas. On combine souvent avec || pour une valeur par défaut.

const prenom = localStorage.getItem('prenom'); // 'Marie'
const absent = localStorage.getItem('inexistant'); // null

const theme = localStorage.getItem('theme') || 'clair';

Supprimer une clé ou tout vider

removeItem cible une seule clé. clear efface tout le stockage du domaine courant : à utiliser avec prudence.

localStorage.removeItem('prenom');
localStorage.clear(); // supprime toutes les clés de ce domaine

Parcourir les entrées

length donne le nombre de paires. key(i) retourne le nom de la clé à l'index i (l'ordre n'est pas garanti entre navigateurs).

console.log(localStorage.length);

for (let i = 0; i < localStorage.length; i++) {
  const cle = localStorage.key(i);
  const valeur = localStorage.getItem(cle);
  console.log(`${cle} : ${valeur}`);
}

Le LocalStorage ne stocke que des chaînes de caractères. Pour stocker des objets ou des tableaux, on les convertit avec JSON.stringify et on les récupère avec JSON.parse.

Stocker et relire un objet

On sérialise l'objet en JSON (une seule chaîne), puis on parse au moment de la lecture pour retrouver propriétés et tableaux imbriqués.

const etudiant = { nom: 'Marie', age: 22, cours: ['Web', 'BD'] };

localStorage.setItem('etudiant', JSON.stringify(etudiant));

const json = localStorage.getItem('etudiant');
const objet = JSON.parse(json);
console.log(objet.nom);
console.log(objet.cours);

Petites fonctions utilitaires (clé absente)

Éviter d'appeler JSON.parse sur null : tester la valeur retournée par getItem avant de parser.

function lireLS(cle) {
  const val = localStorage.getItem(cle);
  return val ? JSON.parse(val) : null;
}

function ecrireLS(cle, valeur) {
  localStorage.setItem(cle, JSON.stringify(valeur));
}

Stocker et relire un tableau

Un tableau JavaScript devient une chaîne JSON du type [85,92,...]. Après parse, on retrouve un vrai tableau.

const notes = [85, 92, 78, 95];
localStorage.setItem('notes', JSON.stringify(notes));

const notesLues = JSON.parse(localStorage.getItem('notes'));
console.log(notesLues[0]); // 85

Exemple : liste de tâches persistante

On charge la liste depuis le stockage (ou tableau vide), on met à jour le tableau en mémoire, on réécrit le JSON, puis on rafraîchit le DOM.

let taches = JSON.parse(localStorage.getItem('taches')) || [];

function ajouterTache(texte) {
  taches.push({ texte, fait: false });
  localStorage.setItem('taches', JSON.stringify(taches));
  afficherTaches();
}

function afficherTaches() {
  const ul = document.querySelector('#listeTaches');
  ul.innerHTML = '';
  taches.forEach((t) => {
    const li = document.createElement('li');
    li.textContent = t.texte;
    ul.appendChild(li);
  });
}

Reproduisez le plus fidèlement possible la démo Mémo-pad persistant ci-dessus dans un fichier HTML séparé.

1. Recréez la structure (textarea, message de statut sous le textarea, puis boutons Sauvegarder / Effacer).
2. Au chargement, relisez la note dans localStorage et remplissez le textarea si une valeur existe.
3. Au clic sur Sauvegarder : enregistrez le texte, affichez un message de confirmation puis masquez-le après quelques secondes.
4. Au clic sur Effacer : supprimez la clé du stockage, videz le textarea et affichez un message adapté.

Les questions sont cachées par défaut. Clique sur « Commencer le quiz » pour débuter.