Comment utiliser LocalStorage en JavaScript pour sauvegarder et récupérer des données

LocalStorage permet aux développeurs de stocker des données clé-valeur de manière persistante dans le navigateur d’un utilisateur. C’est utile pour stocker les préférences utilisateur, mettre en cache les réponses d’API et maintenir l’état de l’application entre les sessions.

Comprendre LocalStorage

LocalStorage fait partie de l’API Web Storage et fournit des méthodes pour stocker, récupérer et supprimer des données :

localStorage.setItem('theme', 'dark'); // Store data
const theme = localStorage.getItem('theme'); // Retrieve data
localStorage.removeItem('theme'); // Remove a specific item
localStorage.clear(); // Clear all stored data

LocalStorage conserve les données jusqu’à ce qu’elles soient explicitement supprimées. Les données sont stockées sous forme de chaînes de caractères, donc pour les objets ou tableaux, utilisez JSON.stringify() et JSON.parse() :

const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('settings', JSON.stringify(settings));
const savedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(savedSettings.theme); // ""dark""

Cas d’utilisation 1 : Stocker les préférences utilisateur

LocalStorage est couramment utilisé pour stocker les paramètres d’interface utilisateur comme les préférences de thème.

// Saving theme preference
localStorage.setItem('theme', 'dark');

// Applying stored preference on page load
const savedTheme = localStorage.getItem('theme');
if (savedTheme) applyTheme(savedTheme);

Cas d’utilisation 2 : Mise en cache des réponses d’API

La mise en cache des réponses d’API réduit les requêtes réseau inutiles et améliore les performances.

const cacheKey = 'apiData';
const maxAge = 60 * 60 * 1000; // 1 hour

const cached = localStorage.getItem(cacheKey);
if (cached) {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp < maxAge) {
        renderData(data);
    } else {
        localStorage.removeItem(cacheKey);
    }
}

if (!localStorage.getItem(cacheKey)) {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => {
            renderData(data);
            localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: Date.now() }));
        });
}

LocalStorage vs. Autres options de stockage Web

• SessionStorage : Même API que LocalStorage mais les données sont effacées à la fermeture de l’onglet.
• IndexedDB : Prend en charge le stockage de données à grande échelle avec des requêtes structurées mais est plus complexe.
• Cookies : Utilisés pour le stockage côté serveur, automatiquement envoyés avec les requêtes HTTP.

Limitations et bonnes pratiques

• Risques de sécurité : Les données sont accessibles via JavaScript ; ne stockez pas d’informations sensibles.
• Limites de stockage : Environ 5 Mo par origine ; dépasser cette limite génère une erreur QuotaExceededError.
• Accès synchrone : Les lectures/écritures volumineuses peuvent bloquer le thread principal.
• Pas d’expiration automatique : Implémentez manuellement une logique d’expiration si nécessaire.
• Utilisez des espaces de noms : Préfixez les clés pour éviter les conflits (MyApp_theme au lieu de theme).

Conclusion

LocalStorage est un outil puissant mais simple pour persister de petites quantités de données côté client. Il est particulièrement adapté pour stocker les préférences utilisateur et mettre en cache les réponses d’API légères. Cependant, les développeurs doivent être conscients de ses limitations de sécurité et assurer une manipulation appropriée des données pour éviter les problèmes de performance.

FAQ