Comment utiliser le localStorage pour stocker des données en local sur le navigateur ?

Le localStorage est une méthode de stockage de données en local sur le navigateur créé pour palier aux deux problèmes majeurs des cookies : le faible espace de stockage ainsi que le manque de réelle API pour y accéder en Javascript.

Ce stockage de données permet donc, comme les cookies, de stocker des données (clé/valeur) en local pour un domaine précis (blog.example.com et example.com n'auront pas accès au même stockage) pour une taille d'environs 5Mo par domaine.

La taille disponible n'est jamais spécifiée clairement et les tests renvoient des informations différentes selon les navigateurs.

En plus d'être spécifique au domaine, le localStorage est spéficique au protocole, ce qui signifie qu'un site accédé en https ou en http n'aura pas accès à la même instance (et donc aux même données) du storage.

Les données du localStorage seront conservées même si l'utilisateur ferme son navigateur, mais attention, l'utilisateur a la possibilité de supprimer ces données à la main en même temps que ces données de navigation.

Si vous cherchez à stocker des données uniquement pour la session en cours, sans qu'elles soient conservées lors de la fermeture du navigateur, vous pouvez utiliser l'API du sessionStorage qui utilise les mêmes méthodes que celle du localStorage.

Les différentes méthodes

Ajouter une donnée

try {
  localStorage.setItem("key", "value");
} catch(e){...}

À noter que tous les appels au localStorage doivent être encapsulés dans un try/catch car ce dernier peut être désactivé, ne plus avoir d'espace, etc... Les try/catch ont été enlevés des exemples suivants pour simplifier le code.

Ajouter une donnée complexe (Objet/Array)

Le localStorage ne connait qu'un seul type de valeur : les chaînes de caractères. Ce qui signifie que lorsque vous souhaitez enregistrer une donnée d'un autre type, soit Javascript va transformer cette donnée automatiquement (199 devient "199") soit vous devrez "stringifier" cette donnée au préalable.

let arr = [1,2,3];
localStorage.setItem("key", JSON.stringify(arr));

Lire une donnée

//Lire une donnée simple (string)
let str = localStorage.getItem("key");

//Lire une donnée complexe (objet)
let obj = JSON.parse(localStorage.getItem("key"));

//Lire un entier
let nbr = parseInt(localStorage.getItem("key"));

Pensez à l'encapsulation dans un try/catch pour le localStorage, mais aussi pour le JSON.parse qui peut renvoyer une erreur si la donnée retournée n'est pas un objet JSON ou un Array.

Supprimer une donnée

localStorage.removeItem("key");

Note : Cette méthode s'effectuera sans retourner d'erreur même si la clé spécifiée n'existe pas.

Vider le localStorage

Attention : cette méthode effacera l'entiereté du localStorage du domaine actuel, et non pas de tout le navigateur !

localStorage.clear();