Stocker de l'information dans le navigateur¶
On peut stocker de l'information directement dans le navigateur avec les objets localStorage et sessionStorage. La différence entre les deux est que les informations stockés avec localStorage survivent même si on redémarre le navigateur alors qu'avec sessionStorage les données peuvent survivre à un rafraichissement de la page uniquement. Ces deux objets fonctionnent un peu comme un cookie mais avec certaines différences. On utilise les cookies surtout au niveau "serveur" du site internet alors que les objets "storage" seront utilisés du côté client.
Qu'on utilise localStorage ou sessionStorage les données à sauvegarder sont saisie sous la forme clé/valeur. La valeur à sauvegarder doit être du texte (string). Dans le cas contraire (un nombre, un booléen, un objet, etc...) la valeur sera convertie automatiquement en texte.
Ajouter une valeur¶
La fonction setItem(clé, valeur) permet d'ajouter une valeur
Récupérer une valeur¶
La fonction getItem(clé) permet de récupérer une valeur. Elle retournera NULL si la clé n'est pas trouvé. On peut donc s'en servir aussi pour tester si la clé existe dans le stockage local.
// Retourne la valeur de la clé prenom
let prenom = localStorage.getItem('prenom');
// Teste si la clé prénom existe dans le stockage local
if (localStorage.getItem('prenom') === null) {
// ...
}
Supprimer une valeur¶
La fonction removeItem(clé) permet de supprimer une valeur du stockage. On peu aussi supprimer toutes les valeurs avec clear().
// Supprime l'entrée prenom du stockage
localStorage.removeItem('prenom');
// Supprime toutes les entrées
localStorage.clear;
Visualiser les valeurs depuis le navigateur¶
On peut voir les valeurs qui sont enregistrées depuis notre navigateur. Ouvrez l'inspecteur et allez dans l'onglet Stockage pour Firefox ou Application pour Chrome.
