Formation JS | Maîtriser le Local Storage

Comprendre le localStorage

Le stockage local, communément désigné par le terme anglais localStorage, permet de stocker des données dans le navigateur.

Ces données sont stockées au sein de paires clé-valeur dans le navigateur, sous forme de chaînes de caractères.

Les données du localStorage sont rattachées à un domaine (ou sous-domaine) spécifique.

Les données persistent même après la fermeture du navigateur, contrairement à sessionStorage. Elles restent donc en mémoire jusqu’à ce qu’elles soient explicitement effacées ou que les données du navigateur soient nettoyées.

Exploiter le localStorage en JS

Ajouter/modifier des données

Pour ajouter ou modifier des données dans le localStorage, on utilise la méthode setItem() :

localStorage.setItem('pseudo', 'Athios');

• Le premier argument représente la clé (ici 'pseudo'), qui identifie de manière unique l’élément que l’on souhaite stocker.
• Le second argument représente la valeur (ici 'Athios'), qui constitue la donnée associée à cette clé.

On obtient ainsi dans notre localStorage :

const user = { pseudo: 'Athios', age: 30 };
localStorage.setItem('user', JSON.stringify(user)); 

const fruits = ['pomme', 'poire', 'banane'];
localStorage.setItem('fruits', JSON.stringify(fruits));

Récupérer des données

Pour récupérer des données dans le localStorage, on utilise la méthode getItem() :

localStorage.getItem('pseudo');

L’argument représente la clé (ici 'pseudo'), qui identifie de manière unique l’élément que l’on souhaite récupérer.

const storedUser = JSON.parse(localStorage.getItem('user'));

Supprimer des données

Pour supprimer des données dans le localStorage, on utilise la méthode removeItem() :

localStorage.removeItem('pseudo');

A la manière du getItem(), removeItem() va supprimer une donnée en fonction de la clé spécifiée en argument de la méthode.

Cas d’usage du localStorage

Le localStorage est aujourd’hui largement utilisé sur les sites et applications web. Voici ses principaux cas d’usage.

Enregistrer des préférences utilisateur

Nul besoin de backend pour stocker des données ! Et ça, c’est idéal pour stocker des données d’une importance secondaire comme des préférences utilisateur :

• Thème préféré (dark mode ? light mode ?)
• Langue de l’application (fr, en, es…)
• Contenu d’un panier ecommerce
• Etc.

Mise en cache

Le localStorage peut être utilisé pour mettre en cache des retours API, réduisant les appels réseau au cours de la navigation.

Voici un exemple de code JavaScript réalisant la mise en cache temporaire d’une donnée :

const cacheKey = "userData";
const now = Date.now();

const cachedData = JSON.parse(localStorage.getItem(cacheKey));
if (cachedData && now - cachedData.timestamp < 3600000) {
  // Exploitation de cachedData
} else {
	// Récupération fictive des données d'une API
	const data = ...
	// Mise en localStorage
	localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: now }));
}

Limites du localStorage

Si le localStorage s’avère très utile pour stocker des données dans la navigateur , il est impératif de prendre en considération quelques inconvénients.

Espace de stockage faible

Notez que le localStorage offre en moyenne un espace de stockage de 5 à 10 Mo par domaine selon le navigateur. Il n’est donc pas fait pour stocker de grandes quantités de données.

Données non sécurisées

Les données sont stockées en clair et accessibles via du code JavaScript, il est donc impératif d’éviter d’y stocker des informations sensibles tels que des tokens (Clé API, JWT…).