Objet localStorage: Persistance des données dans le navigateur

Qu'est ce que localStorage?

Dans certaines applications, on a besoin de garder une trace des données même après avoir fermé ou rechargé la page. L’objet localStorage est une fonctionnalité du navigateur qui permet de stocker des informations sous forme de paires clé/valeur directement sur l’ordinateur de l’utilisateur.

Contrairement aux variables classiques qui disparaissent à chaque rechargement, les données enregistrées dans localStorage persistent et restent disponibles même après la fermeture du navigateur ou de l’ordinateur. C’est donc un outil pratique pour mémoriser des préférences (comme le choix d’un thème sombre ou clair), sauvegarder des formulaires ou conserver des informations utiles à l’expérience utilisateur sans passer par un serveur.

Cookies vs localStorage

Les cookies sont de petits fichiers stockés par le navigateur et envoyés automatiquement au serveur à chaque requête HTTP. Ils sont indispensables pour gérer les sessions, l’authentification ou encore certaines préférences côté serveur.

En revanche, l’objet localStorage présente plusieurs avantages. En effet, il permet de conserver une quantité de données bien plus importante (environ 5 Mo contre quelques kilo‑octets pour les cookies) et celles‑ci ne sont jamais transmises automatiquement au serveur, ce qui réduit la charge réseau. localStorage est donc particulièrement adapté au stockage de données purement locales, comme des paramètres d’affichage ou des scores de jeu, tandis que les cookies restent essentiels pour la communication avec le serveur.

Gérer les données persistantes setItem et getItem

Pour utiliser l’objet localStorage, on emploie principalement deux méthodes: setItem(key,value) qui permet d’enregistrer une donnée sous une clé donnée, et getItem(key) qui permet de la récupérer plus tard. Par exemple, si l’on souhaite mémoriser le thème d'affichage choisir par l'utilisateur, on peut écrire:
Si on veut récupérer ce thème (même après avoir fermé le navigateur):
Cet exemple illustre bien la manière dont localStorage permet de persister une préférence utilisateur. En enregistrant le thème choisi avec setItem, on s’assure que l’information reste disponible même après avoir fermé ou rouvert le navigateur. Grâce à getItem, on peut relire cette valeur et appliquer automatiquement le bon affichage au chargement de la page. Cela montre que localStorage est un outil simple mais puissant pour améliorer l’expérience utilisateur sans avoir besoin d’un serveur.

Supprimer les données persistantes avec removeItem et clear

En plus de setItem et getItem, l’objet localStorage propose deux méthodes utiles pour gérer les données enregistrées. La méthode removeItem(key) permet de supprimer une donnée précise associée à une clé, tandis que clear() efface toutes les données stockées dans localStorage.

Par exemple:
Ces méthodes sont pratiques pour réinitialiser des préférences ou nettoyer le stockage lorsqu’on veut repartir sur une configuration par défaut.

Le localStorage s’avère très pratique dans de nombreuses situations et applications concrètes. On peut notamment l’utiliser dans les cas suivants:

• Sauvegarde des préférences utilisateur: localStorage permet de conserver des choix comme le thème sombre/clair ou la langue d’affichage. Ainsi, l’utilisateur retrouve automatiquement ses préférences à chaque visite du site.
• Mémorisation des données de formulaires: en enregistrant les champs saisis dans un formulaire, on évite à l’utilisateur de tout ressaisir en cas de rechargement ou de fermeture accidentelle de la page.
• Stockage de scores ou états de jeu: dans une application de divertissement, localStorage peut garder le score maximum ou la progression du joueur, même après avoir quitté le navigateur.
• Conservation d’historique de navigation interne: un site peut utiliser localStorage pour mémoriser les pages consultées ou les éléments ajoutés à une liste de favoris afin de proposer une expérience personnalisée.
• Gestion de petites données locales: il est pratique pour stocker des notes, des paramètres temporaires ou des listes de tâches, sans avoir besoin d’un serveur ou d’une base de données externe.