Utiliser le localStorage dans une application NextJs ou React

Nous allons découvrir ici comment ajouter des valeurs dans le local storage, comment les récupérer, ou les supprimer.

Sommaire

• Stocker des données
• Récuperer des données
• Supprimer une paire valeur-clé
• Vider le local storage
• Récuperer la clé d'une paire
• Savoir combien d'éléments sont stockés
• Résoudre les bugs

Stocker des données

Pour ajouter une donnée dans le local storage, on utilise la méthode setItem() de localStorage.  La syntaxe est la suivante:

localStorage.setItem(key, value)

• key est la clé, qui représente le nom associé à la valeur stockée. C'est comme ça qu'on pourra y accéder par la suite
• value est la valeur à stocker, comme un thème ou autre. On doit renseigner ici un string

Par exemple, pour un thème sombre ou clair:

localStorage.setItem('ThemeDark', 'true');

Récuperer des données

Pour récuperer une valeur stockée, on utilise la méthode getItem(). La syntaxe est la suivante:

localStorage.getItem(key)

Avec ce code, on cible une clé en particulier dont on souhaite récuperer la valeur. La valeur sera rendue sous forme de string. Si on veut récuperer une valeur d'un autre type, comme un booléen, dans l'exemple, on doit utiliser JSON.parse(), pour transformer le string en bool.

JSON.parse(localStorage.getItem('ThemeDark'))

Supprimer une paire valeur-clé

On peut aussi supprimer une donnée stockée en utilisant la méthode removeItem(). Elle prend en paramètre la clé à supprimer.

 localStorage.removeItem(key)

De cette façon, la clé ainsi que la valeur qui lui correspond sont supprimées du local storage. Avec notre exemple :

 localStorage.removeItem('ThemeDark')

Vider le local storage

Pour vider le local storage, on utilise la méthode clear(). Elle permet de supprimer toutes les paires stockées.

localStorage.clear()

Récuperer la clé d'une paire

On peut utiliser la méthode key() pour retrouver la clé d'une valeur, à un index donné dans le local storage.

localStorage.key(index)

Par exemple, si on veut récuperer le nom de la deuxième clé:

localStorage.key(1)

Savoir combien d'éléments sont stockés

Pour finir, on peut connaitre la taille du local storage avec la méthode length(). De cette manière, on obtient le nombre de paires clé-valeurs présentent dans le local storage.

localStorage.length()

Et les bugs ?

Vous pourrez peut-être obtenir ce message d'erreur: ReferenceError: localStorage is not defined. Pour le régler, rien de plus simple : vérifiez avec une condition si window est bien définie.

if (typeof window !== "undefined") {
  value = localStorage.getItem(key)
}

De plus, si vous voulez récupérer une valeur, je vous conseille vivement d'utiliser un useEffect, pour être sûr que la méthode s'éxécute au bon moment.

Il est donc très simple d'utiliser le local storage avec React ou Next. Vous pouvez l'implémenter dans un React Context, pour mettre en place un système de thèmes par exemple, comme on le fait ici.

Si vous voulez tout savoir sur React, allez jeter un oeil sur la formation React complète.