Testez localStorage dans un bac à sable interactif, puis copiez des exemples fonctionnels pour des préférences enregistrées, un panier et un thème, avec la gestion du JSON, les limites de taille, les erreurs et la synchronisation entre onglets.
localStorage est un stockage clé-valeur du navigateur, propre à chaque origine, qui conserve les données après la fermeture de l'onglet et du navigateur. Vous appelez setItem(key, value) pour enregistrer, getItem(key) pour lire, removeItem(key) pour supprimer et clear() pour tout vider. Les valeurs sont toujours des chaînes : enveloppez donc les objets avec JSON.stringify et JSON.parse.
Toute l'API Storage sur une seule fiche
La plupart des bugs liés à localStorage viennent de trois surprises : tout devient une chaîne, l'appel peut lever une exception, et les données sont liées à une origine précise. Le bac à sable ci-dessous écrit dans votre propre navigateur pour que vous voyiez ces règles s'appliquer, puis les exemples montrent des modèles sûrs pour des préférences, un panier d'achat et un changement de thème.
MDN indique une limite de 5 MiB de localStorage par origine dans les navigateurs actuels, avec 5 MiB distincts pour sessionStorage. Les chaînes sont stockées en UTF-16 : le nombre de caractères que vous pouvez y mettre est donc inférieur à ce que suggère le nombre d'octets. Écrire au delà de la limite lève une QuotaExceededError.
Non. Les entrées restent jusqu'à ce que votre code les supprime ou que le visiteur efface les données du site. Dans une fenêtre privée, le navigateur les efface à la fermeture du dernier onglet privé. Si vous avez besoin d'une expiration, stockez un horodatage avec la valeur et vérifiez-le à la lecture.
setItem transforme tout ce que vous lui passez en chaîne. Un objet simple devient le texte [object Object] et les données sont perdues. Enregistrez JSON.stringify(obj) et relisez-le avec JSON.parse.
Non. Le stockage appartient à une origine, c'est-à-dire le schéma, l'hôte et le port réunis. http://example.com et https://example.com ont chacun leur propre stockage distinct, tout comme les sous-domaines.
Écoutez l'événement storage sur window. Il se déclenche dans les autres documents ouverts de la même origine quand l'un d'eux modifie une valeur, et transporte key, oldValue et newValue. L'onglet qui a fait la modification ne le reçoit pas.
Les cookies sont envoyés au serveur à chaque requête et conviennent aux sessions. localStorage ne quitte jamais le navigateur, contient davantage, et convient à l'état de l'interface comme un thème, un brouillon ou une barre latérale repliée.
Choisissez le stockage selon la durée de vie des données et qui en a besoin
Un seul endroit gère le stockage bloqué, le quota plein et le JSON invalide, pour que le reste de votre code n'ait jamais à le faire.
Les valeurs par défaut sont fusionnées avec ce qui a été enregistré : ajouter un nouveau réglage plus tard ne casse donc pas les anciennes données.
Chaque modification crée un nouveau tableau et le réécrit. C'est toujours le serveur qui fixe les prix au paiement.
Si rien n'est enregistré, le réglage du système d'exploitation l'emporte. Exécutez ce code tôt dans le head pour éviter un flash du mauvais thème.
localStorage n'a pas d'expiration intégrée : stockez donc l'échéance avec la valeur et supprimez les entrées périmées à la lecture.
L'événement storage atteint tous les autres onglets de la même origine : un badge de panier peut donc se mettre à jour sans rechargement.
Le stockage est bloqué dans ce navigateur : chaque appel lèverait donc une exception. Votre code a besoin d'une solution de repli.
Exception {name} : {message}
Saisissez d'abord une clé.
{call} a stocké {n} caractères.
{call} a renvoyé null : aucune entrée ne porte cette clé.
JSON.parse a renvoyé : {value}
Le texte stocké n'est pas du JSON : {value}
{call} a renvoyé la chaîne {value}
{call} effectué.
{n} entrées du bac à sable supprimées. Les autres clés de ce site n'ont pas été touchées.
Enregistrez, lisez et supprimez des entrées dans votre propre navigateur et voyez chaque clé que ce site stocke. Les clés du bac à sable commencent par demo: pour ne jamais entrer en conflit avec le site.
Clé
Valeur
Type de valeur
Chaîne simple
Objet (JSON)
Enregistrer
Lire
Supprimer
Effacer les clés du bac à sable
Les résultats s'affichent ici.
Entrées du bac à sable stockées dans votre navigateur ({n})
Chaîne stockée
Commencer gratuitement · Sans carte bancaire