Chapitre 16 – Le localStorage et sessionStorage

Le navigateur met à disposition deux systèmes de stockage local appelés Web Storage API : localStorage et sessionStorage. Ces mécanismes permettent de stocker des données côté client de façon simple et rapide.

1. Stockage côté client

Ces deux objets permettent de stocker des paires clé → valeur sous forme de chaînes de caractères. Ils sont accessibles via l'objet global window.

// Accès aux objets de stockage
console.log(window.localStorage); // ou simplement localStorage
console.log(window.sessionStorage); // ou simplement sessionStorage

• localStorage : les données sont conservées indéfiniment (jusqu'à suppression manuelle ou par le script).
• sessionStorage : les données sont conservées uniquement pendant la session du navigateur (jusqu'à la fermeture de l'onglet).

2. Lire, écrire, supprimer des données

Écriture

// localStorage
localStorage.setItem("nom", "Alice");

// sessionStorage
sessionStorage.setItem("age", "30");

Lecture

const nom = localStorage.getItem("nom");
console.log(nom); // "Alice"

const age = sessionStorage.getItem("age");
console.log(age); // "30"

Suppression

// Supprimer un élément spécifique
localStorage.removeItem("nom");

// Supprimer tous les éléments
sessionStorage.clear();

3. Conversion d'objets avec JSON

Comme Web Storage ne stocke que des chaînes de caractères, il est nécessaire d'utiliser JSON.stringify() pour stocker des objets, et JSON.parse() pour les relire.

const utilisateur = {
  prénom: "Alice",
  connecté: true
};

// Enregistrement
localStorage.setItem("utilisateur", JSON.stringify(utilisateur));

// Lecture
const data = localStorage.getItem("utilisateur");
const utilisateurObj = JSON.parse(data);

console.log(utilisateurObj.prénom); // "Alice"
console.log(utilisateurObj.connecté); // true

4. Cas d'utilisation

Voici quelques exemples concrets d'utilisation de localStorage et sessionStorage :

• Sauvegarde des préférences utilisateur (ex : thème sombre ou clair).
• Connexion automatique en mémorisant des tokens (avec prudence).
• Formulaires auto-remplis si l'utilisateur revient plus tard.
• Panier d'achat temporaire dans une boutique en ligne.
• Navigation multi-pages avec données temporaires via sessionStorage.

5. Limitations et bonnes pratiques

• Les données sont visibles par le client : ne jamais y stocker des informations sensibles (mot de passe, carte bancaire...)
• Capacité limitée (~5 Mo selon les navigateurs).
• Les données sont stockées par origine (protocole + domaine + port).
• Toujours utiliser try...catch car le stockage peut être désactivé ou plein.
• Pour des données plus complexes, envisager IndexedDB.

// Exemple avec gestion d'erreur
try {
  localStorage.setItem("config", JSON.stringify({ theme: "sombre" }));
} catch (e) {
  console.error("Erreur de stockage:", e);
  // Gérer l'erreur (stockage plein ou indisponible)
}