Comprendre le fonctionnement du LocalStorage
Le LocalStorage est une API web qui permet de stocker des données sous forme de paires clé-valeur directement dans le navigateur de l’utilisateur. Contrairement aux cookies, ces données n’ont pas de date d’expiration et ne sont pas envoyées au serveur à chaque requête HTTP, ce qui en fait un outil idéal pour stocker des préférences d’affichage ou des états d’interface.
Enregistrer et récupérer des données simples
L’interaction avec le LocalStorage repose sur des méthodes très simples. Pour enregistrer une information, on utilise setItem, et pour la récupérer, getItem.
// Sauvegarder une préférence
localStorage.setItem('theme', 'dark');// Récupére la préférence
const currentTheme = localStorage.getItem('theme');
console.log(currentTheme); // Affiche 'dark'Attention : le LocalStorage ne stocke que des chaînes de caractères (strings). Si vous tentez d’y enregistrer un nombre ou un booléen, Javascript le convertira automatiquement en texte.
Gérer des objets et des tableaux avec JSON
Pour sauvegarder des structures de données plus complexes, comme un profil utilisateur ou une liste de paramètres, il est nécessaire de transformer l’objet en chaîne JSON via JSON.stringify() avant l’enregistrement, puis de le reconvertir avec JSON.parse() lors de la lecture.
const userSettings = {fontSize: '16px',notifications: true,language: 'fr'};// Conversion de l'objet en string pour le stockage
localStorage.setItem('settings', JSON.stringify(userSettings));
// Récupération et conversion inverse en objet Javascript
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.fontSize); // Affiche '16px'
Cas pratique : Implémentation d’un mode sombre
Voici un exemple concret pour basculer le thème d’une page et mémoriser ce choix même après le rafraîchissement de la page.
//Changer la couleur de fons du thème
body.dark-mode {
background: #333;
color: #fff; }
const btn = document.getElementById('theme-toggle');
const body = document.body;// 1. Vérifier si une préférence existe déjà au chargement
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark-mode');}// 2. Gérer le clic sur le bouton
btn.addEventListener('click', () => {
body.classList.toggle('dark-mode');// 3. Sauvegarder l'état actuel
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');}
else {
localStorage.setItem('theme', 'light');}
});
Ce script assure une expérience utilisateur fluide : l’utilisateur choisit son thème, et le site s’en souvient indéfiniment sur cet appareil.
Supprimer des données
Pour effacer une entrée spécifique, on utilise removeItem. Pour vider l’intégralité du stockage lié au domaine, on utilise clear.
// Supprimer uniquement le thème
localStorage.removeItem('theme');
// Tout effacer
localStorage.clear();
Conclusion
Le LocalStorage est un outil puissant et simple d’utilisation pour persister des données côté client dans le navigateur web.
Persistance durable : Les données conservent leur valeur même après la fermeture du navigateur ou le redémarrage de l’appareil.
Limites à garder en tête : Il est limité en taille (généralement 5 Mo par domaine) et ne doit jamais être utilisé pour stocker des données sensibles (mots de passe, tokens de sécurité non sécurisés), car elles sont accessibles via n’importe quel script exécuté sur la page (vulnérabilité XSS).
Pour aller plus loin dans vos projets web, vous pouvez combiner le LocalStorage avec d’autres API de stockage comme SessionStorage (pour une durée limitée à l’onglet en cours) ou IndexedDB pour des volumes de données plus importants et structurés.
