Utiliser le Web Storage avec Javascript

Nous connaissons les cookies pour stocker des données sur notre navigateur. Mais l'on peu également utiliser le web storage

C'est très simple, alors regardons comment cela fonctionne.

Stockage des données dans le navigateur

L'API Web Storage fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. Mozilla developper

Pour utiliser cette fonctionnalité, deux interfaces javascript nous son proposés :

• sessionStorage
• localStorage

Stockage en session : sessionStorage

L'interface sessionStorage sauvegarde les données sur la durée d'une session et celles-ci ne sont disponible que dans la fenêtre ou l'onglet actif. Et si elles sont sauvegarder pendant la durée d'une session elles sont donc supprimées à la fermeture de cette fenêtre/onglet.

Stockage en local : localStorage

A l'inverse du sessionStorage le localStorage sauvegarde les données, les persiste même après fermeture de la fenêtre/onglet et tout cela sans durée.

Mais comment ca marche ?

Utiliser sessionStorage et localStorage

Ces deux interfaces utilisent les mêmes méthodes:

• setItem(clé,valeur) : stocke une paire clé/valeur
• getItem(clé) : retourne la valeur associée à une clé
• removeItem(clé) : supprime la paire clé/valeur en indiquant le nom de la clé
• key(index): retourne la clé stockée à l'index spécifié
• clear(): efface toutes les paires

Facile n'est-ce pas ?

setItem()

localStorage.setItem('theme', 'dark')

Le premier argument est toujours de type string.

getItem()

Après avoir créé une clé il nous est possible de la récupérer :

let theme = sessionStorage.getItem("theme");

Accès direct

Plutôt que de récuperer une valeur via getItem("theme") il nous est possible d'accéder à la valeur via localStorage.theme. Pratique, non ?

removeItem()

Si vous souhaitez supprimer une clé :

let theme = sessionStorage.removeItem("theme");

Pour plus d'information : Mozzila Developper