API Web Storage

L'API Web Storage fournit deux mécanismes pour stocker des paires clé-valeur dans le navigateur : localStorage et sessionStorage.

localStorage :

• Les données persistent indéfiniment — survivent à la fermeture et au redémarrage du navigateur
• Supprimées uniquement lorsqu'elles sont explicitement retirées par le code ou par l'utilisateur
• Partagées entre tous les onglets/fenêtres de la même origine

sessionStorage :

• Les données sont effacées lorsque l'onglet est fermé
• Chaque onglet possède son propre sessionStorage séparé
• Non partagé entre les onglets

Caractéristiques communes :

• Les deux stockent des paires clé-valeur où la clé et la valeur sont des chaînes de caractères
• Limite de stockage d'environ 5 Mo par origine
• Soumis à la politique de même origine (accessible uniquement depuis le même domaine)
• API synchrone (bloque le thread principal — évite de stocker de grandes quantités de données)

// localStorage persiste
localStorage.setItem('theme', 'dark');
// Ferme le navigateur, rouvre-le — la valeur est toujours là !

// sessionStorage est temporaire
sessionStorage.setItem('tempData', 'disparaît à la fermeture de l'onglet');

localStorage et sessionStorage partagent la même API.

Définir des valeurs :

localStorage.setItem('username', 'Alice');
localStorage.setItem('score', '100');

Récupérer des valeurs :

const name = localStorage.getItem('username'); // 'Alice'
const missing = localStorage.getItem('nonexistent'); // null

Supprimer des valeurs :

localStorage.removeItem('username');

Tout effacer :

localStorage.clear(); // supprime TOUS les éléments

Autres propriétés :

// Nombre d'éléments stockés
console.log(localStorage.length);

// Obtenir une clé par index
console.log(localStorage.key(0)); // nom de la première clé

Important : Toutes les valeurs sont stockées sous forme de chaînes de caractères. Si tu stockes un nombre, il revient sous forme de chaîne :

localStorage.setItem('count', 42);
const count = localStorage.getItem('count');
console.log(typeof count); // 'string'
console.log(count);        // '42' (pas 42)

Puisque Storage n'accepte que des chaînes de caractères, tu dois sérialiser les objets et tableaux avec JSON.stringify() avant de les stocker, et les parser avec JSON.parse() lors de la récupération.

// Stocker un objet
const user = { name: 'Alice', age: 30, scores: [95, 87, 92] };
localStorage.setItem('user', JSON.stringify(user));

// Récupérer et parser
const stored = localStorage.getItem('user');
const parsed = JSON.parse(stored);
console.log(parsed.name);    // 'Alice'
console.log(parsed.scores);  // [95, 87, 92]

Gère toujours null — getItem retourne null si la clé n'existe pas, et JSON.parse(null) retourne null (ne lance pas d'erreur) :

const data = localStorage.getItem('maybeExists');
const result = data ? JSON.parse(data) : defaultValue;

Fonctions utilitaires pratiques :

function saveJSON(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}

function loadJSON(key, fallback = null) {
  const data = localStorage.getItem(key);
  return data ? JSON.parse(data) : fallback;
}

// Utilisation
saveJSON('settings', { theme: 'dark', lang: 'en' });
const settings = loadJSON('settings', { theme: 'light' });

Bons cas d'usage pour Web Storage :

• Préférences utilisateur — thème, langue, taille de police
• Brouillons de formulaires — sauvegarde automatique des saisies pour que les utilisateurs ne perdent pas leur travail
• Panier d'achat — persister les articles du panier entre les rafraîchissements de page
• État de l'interface — barre latérale réduite, dernier onglet consulté, ordre de tri
• Cache simple — stocker les réponses d'API pour réduire les requêtes réseau

Limitations :

• Chaînes uniquement — tu dois sérialiser/désérialiser les objets
• Synchrone — peut bloquer l'interface si surutilisé
• Taille limitée — environ 5 Mo par origine
• Pas d'expiration — localStorage n'a pas de TTL (durée de vie) intégré
• Pas d'accès serveur — les données sont disponibles uniquement côté client
• Pas de requêtes structurées — on ne peut que récupérer/définir par clé

Alternatives pour des besoins plus avancés :

• Cookies — envoyés avec chaque requête HTTP, peuvent avoir une expiration, plus petits (4 Ko)
• IndexedDB — asynchrone, supporte de grandes quantités de données structurées, transactions
• Cache API — conçu pour mettre en cache les requêtes réseau (utilisé avec les Service Workers)

Note de sécurité : Ne stocke jamais de données sensibles (mots de passe, tokens, informations personnelles) dans localStorage. Il est accessible à tout JavaScript sur la page et vulnérable aux attaques XSS.