Lire et écrire dans localStorage avec React

localStorage est un stockage intégré au navigateur qui possède quatre méthodes principales : setItem(key, value), getItem(key), removeItem(key) et clear(). Les données sont conservées après le rechargement de la page et le redémarrage du navigateur.

Il se trouve sur l'objet window et sa portée est définie par origine : chaque domaine dispose de son propre stockage isolé.

Chaque appel à localStorage s'exécute de manière synchrone sur le fil principal. Lire ou écrire de grandes quantités de données peut bloquer le rendu et rendre l'interface saccadée.

Pour cette raison, stockez de petites valeurs et évitez d'écrire à chaque frappe ou événement de défilement.

localStorage ne peut contenir que des chaînes de caractères. Pour stocker un objet ou un tableau, vous devez d'abord le sérialiser avec JSON.stringify(value) avant d'appeler setItem.

Si vous stockez directement une valeur qui n'est pas une chaîne, elle est convertie ; un objet devient donc l'inutile chaîne [object Object].

Lors de la lecture, vous appelez JSON.parse(localStorage.getItem(key)), mais l'analyse peut lever une exception si la chaîne stockée est corrompue ou a été écrite par une autre source.

Entourez l'analyse d'un try/catch et utilisez une valeur par défaut afin qu'une entrée incorrecte ne fasse pas planter votre composant.

localStorage n'est pas toujours utilisable : pendant le rendu côté serveur, window n'existe pas, et certains modes de navigation privée lèvent une exception lors de l'écriture. Protégez l'accès à l'aide d'une vérification de fonctionnalité.

Une vérification sûre consiste à utiliser un try/catch qui définit puis supprime une clé factice, et indique l'indisponibilité en cas d'exception.

La plupart des navigateurs limitent localStorage à environ cinq mégaoctets par origine. La dépasser provoque une QuotaExceededError lors de l'écriture.

localStorage convient donc aux petites données, mais constitue un mauvais choix pour les images, les grands ensembles de données ou les réponses d'interface de programmation mises en cache.

Les bons candidats sont de petits éléments non sensibles liés à l'interface utilisateur et à l'état de l'utilisateur : préférence de thème, état réduit de la barre latérale, derniers filtres utilisés, bannières masquées et brouillons de formulaires non enregistrés.

Ce sont des valeurs que vous souhaitez conserver après un rechargement, mais qui ne nécessitent pas d'aller-retour vers le serveur.

Évitez de stocker des secrets tels que des jetons ou des mots de passe, car tout script exécuté sur la page peut lire localStorage, ce qui le rend vulnérable aux attaques XSS. Évitez également les objets volumineux et l'état de référence du serveur.

Les données d'authentification sensibles doivent être placées dans des cookies httpOnly, tandis que les données de référence doivent rester sur le serveur.

Les deux exposent la même interface, mais sessionStorage est vidé à la fermeture de l'onglet et n'est pas partagé entre les onglets. localStorage persiste indéfiniment et est partagé entre tous les onglets de la même origine.

Choisissez sessionStorage pour les données éphémères propres à un onglet et localStorage pour les préférences durables.

Les cookies sont petits et envoyés avec chaque requête HTTP, ce qui convient à l'authentification mais gaspille de la bande passante pour les données générales. IndexedDB est une base de données asynchrone destinée aux grandes quantités de données structurées, bien au-delà de la limite de 5 Mo.

Choisissez les cookies pour l'authentification lue par le serveur, localStorage pour les petites préférences côté client et IndexedDB pour les données volumineuses ou complexes.

Une fonction utilitaire minimale écrit avec localStorage.setItem(key, JSON.stringify(value)) et lit avec un try/catch protégé autour de JSON.parse(localStorage.getItem(key)), en renvoyant une valeur par défaut en cas d'échec.

Cette petite couche centralise la sérialisation et la gestion des erreurs.

Testez votre compréhension des types de données de localStorage.

Vous avez appris à utiliser l'interface localStorage, à savoir qu'elle est synchrone, limitée aux chaînes de caractères et plafonnée à près de 5 Mo, ainsi qu'à analyser les données de manière sûre et à vérifier sa disponibilité pour SSR et le mode privé.

Vous l'avez également comparée à sessionStorage, aux cookies et à IndexedDB afin de choisir le stockage approprié.