Lire, définir et supprimer des éléments

localStorage et sessionStorage exposent tous deux les quatre méthodes principales suivantes : getItem(key), setItem(key, value), removeItem(key) et clear(). Ce sont de simples espaces de stockage clé-valeur gérés par le navigateur.

localStorage.setItem("theme", "dark") conserve une chaîne sous la clé "theme". La clé et la valeur doivent toutes deux être des chaînes : les valeurs qui ne sont pas des chaînes sont converties via String() avant le stockage, ce qui altère silencieusement les objets et les tableaux.

Pour stocker des données structurées, sérialisez-les avec JSON : localStorage.setItem("user", JSON.stringify(user)). Relisez-les ainsi : const user = JSON.parse(localStorage.getItem("user")). Encadrez toujours l’analyse dans un bloc try/catch au cas où la valeur stockée serait mal formée.

getItem("missing") renvoie null lorsque la clé n’existe pas, jamais undefined. Utilisez l’opérateur de coalescence des valeurs nulles pour fournir des valeurs par défaut : const theme = localStorage.getItem("theme") ?? "light".

Vous pouvez également utiliser la notation avec crochets ou avec un point : localStorage.theme = "dark" et localStorage["theme"]. Les deux fonctionnent, mais masquent l’intention : préférez les appels explicites aux méthodes, qui indiquent clairement qu’il s’agit d’un stockage persistant et non d’une propriété d’objet.

localStorage.removeItem("theme") supprime une seule clé. localStorage.clear() supprime toutes les clés de l’origine actuelle. clear() est destructif : ne l’appelez jamais sans raison majeure, car il supprime les données définies par tous les scripts de la page.

Utilisez localStorage.length et localStorage.key(index) pour parcourir toutes les clés stockées, ou développez Object.keys(localStorage). Cette technique est utile pour les migrations, le débogage et le nettoyage par préfixe, par exemple pour supprimer toutes les clés commençant par "cache:".

Les navigateurs allouent environ 5 à 10 MB par origine. Le dépassement du quota déclenche une erreur QuotaExceededError. Encadrez setItem dans un bloc try/catch lorsque vous stockez des valeurs potentiellement volumineuses, comme des caches d’images ou des brouillons de documents, afin que l’erreur ne fasse pas planter l’application.

Le stockage est partagé par toute l’origine. Préfixez vos clés avec le nom de l’application ou de la fonctionnalité (app:settings, cart:items) afin d’éviter les collisions avec d’autres scripts, bibliothèques tierces et extensions de navigateur exécutés sur la même origine.

L’interface de stockage est entièrement synchrone : chaque appel bloque le thread principal jusqu’à la fin des entrées-sorties sur disque. Évitez de stocker de très grandes données ou d’appeler setItem dans des boucles serrées ; regroupez plutôt les mises à jour dans un seul objet sérialisé.

La même interface de programmation, mais une durée de vie différente. sessionStorage est effacé à la fermeture de l’onglet ; localStorage persiste après les redémarrages du navigateur. Choisissez sessionStorage pour l’état éphémère d’un assistant et localStorage pour les préférences de l’utilisateur qui doivent survivre à une actualisation.

Que renvoie localStorage.getItem("missing-key") lorsque la clé n’a jamais été définie ?

getItem, setItem, removeItem et clear sont les quatre piliers du stockage Web. Les valeurs sont toujours des chaînes : encapsulez donc les données structurées avec JSON. Prévoyez les retours null, l’erreur QuotaExceededError et l’utilisation d’espaces de noms afin de partager l’origine correctement avec les autres scripts.