ArticleJavascript localStorage démistifié
Nous vous êtes vous jamais demandé comment stocker des données localement et facilement ? C'est que ne nous allons voir ici en apprenant à manipuler l'api localStorage
Prérequis
- Connaître les bases de Javascript (fonctions, variables, ...)
- Connaître les objets Javascript et le JSON
- Savoir ce qu'est qu'une API d'un navigateur
Concept
Le localstorage est une fonctionnalité des navigateurs permettant de stocker et récupérer une chaîne de caractère, sur un navigateur avec Javascript. A la différence d'une simple variable, l'information est persistante entre les pages d'un même site et entre les différentes visites d'un utilisateur.
Utilisée avec JSON.stringify(), cette fonctionnalité peut aussi permettre de stocker des informations plus complexes comme des objets ou des listes. C'est ce que nous verrons dans la deuxième partie de cet article.
LocalStorage peut par exemple servir à stocker :
- Un thème (clair, sombre, etc...) d'un utilisateur
- Un panier d'un site e-commerce
- Un token d'autorisation (avec un JSON Web Token par exemple)
Comment l'utiliser ?
En pratique, si on prend le premier exemple (stockage du thème de l'utilisateur), on peut sauvegarder le choix de l'utilisateur de cette manière :
localStorage.setItem('theme', 'black')
La méthode setItem() de l'objet localstorage prend le nom de la valeur en premier argument ("theme") , et la valeur ("black") en deuxième argument.
En résumé, l'équivalent avec une variable traditionnelle serait : const theme = 'dark'
La valeur peut évidemment être une variable qui contiendrai elle même une chaîne de caractère, c'est d'ailleurs le cas la plupart du temps.
La clé sera ensuite utile pour récupérer la chaîne de caractère grâce à la methode getItem :
var theme = localStorage.getItem('theme')
La variable theme contient donc maintenant la chaîne de caractère "black"
Pour supprimer le stockage, il suffit maintenant de faire :
localStorage.removeItem('theme')
Stocker des listes, des objets ou du json
En javascript, on peut facilement transformer un objet Javascript en chaîne de caractère (JSON) de cette manière :
var membreConnecteJson = {
nom: 'Dupont',
prenom: 'Sebastien'
}
var membreConnecteString = JSON.stringify(membreConnecteJson)
membreConnecteString est maintenant un chaîne de caractère, elle est donc stockable avec localStorage.
On peut donc stocker le membre connecté de la même manière que précédement mais en passant la variable précédement créée en deuxième argument :
localStorage.setItem('membreConnecte', membreConnecteString)
Ensuite, on peut récupérer le membre connecté ( sur une autre page par exemple ) en chaîne de caractère. Et le retransformer en json, objet ou liste avec la méthode JSON.parse()
var membreConnecteString = localStorage.getItem('membreConnecte')
var membreConnecteObject = JSON.parse(membreConnectString)