JavaScript (souvent abrégé en JS) est l'un des fondements de l'infrastructure web moderne. C'est un langage de programmation léger, interprété et orienté objet qui prend en charge les fonctions de première classe. JavaScript est principalement connu pour son implémentation dans les pages web dynamiques. En raison de ses fonctionnalités, cependant, JavaScript est également utilisé dans des environnements hors navigateur.
Dans ce guide, nous examinerons en détail deux objets JavaScript: localStorage et sessionStorage.
Présentation de localStorage et sessionStorage
Les objets localStorage et sessionStorage sont proposés dans le cadre de l'API Web Storage. C'est un excellent outil pour le stockage local de paires clé-valeur. L'utilisation de localStorage et sessionStorage est une excellente alternative aux cookies. Cette approche offre des avantages supplémentaires :
- Les données sont stockées localement et ne peuvent pas être lues par le serveur. Cela élimine les problèmes de sécurité liés aux cookies.
- Il permet une capacité de stockage plus élevée (jusqu'à 10 Mo pour la plupart des navigateurs modernes).
- Une syntaxe simple et directe.
Ces objets sont pris en charge par tous les navigateurs web modernes, il n'y aura donc pas de problème de compatibilité. Les cookies restent utiles dans de nombreuses situations, par exemple pour l'authentification. Cependant, il existe des situations où localStorage et sessionStorage offrent de meilleures solutions.
Prérequis
Pour suivre les étapes présentées dans ce tutoriel, vous aurez besoin des composants suivants :
- Un serveur Linux correctement configuré. Ce guide présente la configuration de votre propre serveur Ubuntu sur CloudSigma.
- Node.js en tant qu'environnement d'exécution JavaScript. En savoir plus sur l'installation de Node.js sur Ubuntu ici.
- Un navigateur web moderne, par exemple, Google Chrome ou Firefox.
Pour la démonstration, nous avons récupéré un exemple de page web associée à un script JS. Vous pouvez en savoir plus sur l'ajout de JavaScript à un fichier HTML ici:
En ce qui concerne l'éditeur de texte, nous utiliserons Visual Studio Code:
Quelle est la différence entre localStorage et sessionStorage ?
Les deux localStorage et sessionStorage proviennent de la même API. Leurs comportements sont également identiques. La seule différence réside dans la manière dont chaque objet permet la persistance des données. Dans le cas de sessionStorage, les données persistent jusqu'à la fermeture de la fenêtre ou de l'onglet. Avec localStorage, les données persistent jusqu'à ce que le cache du navigateur soit vidé ou que l'application web les efface.
Dans ce tutoriel, nous nous concentrerons principalement sur localStorage. Cependant, la syntaxe pour sessionStorage est la même. Nous montrerons comment créer, lire et mettre à jour des paires clé/valeur à l'aide de localStorage.
Étape 1 – Création d'entrées
Nous pouvons déclarer une entrée dans l'objet localStorage en utilisant setItem(). Cette méthode prend deux arguments : la clé et sa valeur correspondante. La structure de la méthode est la suivante :
|
1 |
localStorage.setItem(<key>, <value>) |
Dans l'exemple suivant, nous avons créé une variable key. En utilisant la méthode setItem(), nous avons défini une nouvelle key et défini sa valeur sur ‘value’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Étape 2 – Lecture d'entrées
Maintenant, comment lire la valeur stockée dans la clé ? Pour obtenir une clé de localStorage, nous utiliserons la méthode getItem(). Elle prend le nom de la clé et renvoie les valeurs stockées dans la clé. Nous utiliserons la méthode alert() pour afficher le contenu que nous récupérons :
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Ensuite, ouvrez la page web dans un navigateur web. Elle devrait afficher la valeur stockée dans la key:
Étape 3 – Mise à jour d'entrées
Une fois qu'une valeur est définie, elle le reste à moins d'être modifiée. Si nous utilisons à nouveau la méthode setItem() sur la même key , elle remplacera automatiquement l'ancienne valeur par la nouvelle.
Dans l'exemple suivant, la key est d'abord initialisée avec la valeur ‘value’. À la ligne suivante, nous avons appelé setItem() une fois de plus et défini la valeur sur ‘nouvelle valeur’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Voyons ce qui se passe lorsque nous exécutons ce code dans le navigateur :
Comme nous pouvons le voir, la valeur de la clé est définie sur ‘nouvelle valeur’.
Étape 4 – Suppression des entrées
S’il y a plusieurs entrées dans le localStorage (et sessionStorage également) qui ne sont plus nécessaires, il est recommandé de les effacer ensuite. Cela libère de l’espace pour une utilisation ultérieure. L’application devient également plus efficace en termes de mémoire.
Pour supprimer une entrée de localStorage, il existe une méthode dédiée removeItem(). Elle prend la clé comme argument et la supprime du pool de données localStorage :
|
1 |
localStorage.removeItem(<clé_à_supprimer>) |
Implémentons-le dans notre script :
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Lors de l’exécution, la sortie indique null car il n’existe aucune valeur pour la clé:
Étape 5 – Effacer les entrées
Dans l’exemple précédent, nous n’avons supprimé qu’une seule clé. Cependant, localStorage permet d’effacer tous les éléments stockés en une seule étape. Pour effacer toutes les entrées, localStorage propose la méthode clear(). Elle ne prend aucun argument :
|
1 |
localStorage.clear(); |
Mettons la méthode en action :
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Tout comme avant, elle supprime toutes les entrées de localStorage, donc lors de la tentative d’accès à la valeur de la clé, elle renvoie null:
Étape 6 – Travailler avec JSON
-
Stockage d’objets et de tableaux
Les objets localStorage et sessionStorage ne peuvent stocker que des valeurs de chaîne. Cependant, il y aura des moments où vous devrez travailler avec des objets ou des tableaux. Dans ce cas, nous devons les convertir en chaîne.
JavaScript est doté de la fonctionnalité JSON.stringify() qui prendra le tableau/l’objet et le convertira en chaînes. Cet article donne un aperçu rapide du format JSON. Pour un guide plus élaboré, vous pouvez lire JSON en JavaScript.
Dans cet exemple, nous avons créé un objet sampleObj avec deux champs name et location. Nous le convertirons en chaîne et le stockerons dans la clé:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Ici, la sortie sera la chaîne contenant les données de l’objet :
-
Lecture d’objets et de tableaux
Lors du stockage, nous avons converti les objets et les tableaux en chaînes. Nous pouvons également prendre cette chaîne et la reconvertir dans son format d’origine. Pour ce faire, nous utiliserons la méthode JSON.parse(). Elle prend une chaîne et la reconvertit au format JSON :
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Quant à la sortie, nous l’avons reconvertie en chaîne et formatée pour un meilleur affichage :
Étape 7 – Vérification de la présence d’un élément dans localStorage
Dans cette section, nous présenterons un test simple pour déterminer si localStorage et sessionStorage contiennent un élément ou non. En utilisant une simple if instruction, nous pouvons vérifier la longueur de localStorage ou sessionStorage. S'il y a des éléments, la longueur sera supérieure à 0.
Tout d'abord, implémentez l'exemple suivant :
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Ici, la sortie sera ‘true’ car il existe une clé dans localStorage:
Étape 8 – Itération sur les éléments
Les objets localStorage et sessionStorage stockent les clés dans une structure semblable à un tableau. Ils ne prennent pas en charge la méthode forEach, nous devrons donc suivre la technique classique consistant à utiliser une boucle for pour itérer sur chaque élément.
Dans l'exemple suivant, nous allons vérifier si localStorage est vide ou non. S'il n'est pas vide, nous allons itérer sur chaque élément :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
La sortie affichera tous les éléments un par un :
Étape 9 – Vérifier la prise en charge du navigateur
Nous pouvons vérifier la prise en charge de localStorage (et sessionStorage) en vérifiant s'il est disponible sur l'objet window. Une simple instruction if fera l'affaire :
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Exécutez le code dans le navigateur web :
Dernières réflexions
Ce guide a montré comment utiliser les objets localStorage et sessionStorage en JavaScript pour stocker des paires clé/valeur dans le navigateur. Les syntaxes sont beaucoup plus simples à utiliser. Nous avons montré comment créer, supprimer et mettre à jour des paires clé/valeur. Nous avons également abordé le stockage d'objets et de tableaux en les convertissant en chaînes de caractères (et vice-versa).
Pour approfondir vos connaissances en JavaScript, vous pouvez consulter les tutoriels suivants de notre blog:
- Bases de JavaScript : comment travailler avec la date et l'heure
- JavaScript : un tutoriel sur la façon d'indexer, de diviser et de manipuler des chaînes de caractères
- Travailler avec JavaScript : comment fonctionnent les classes
- Travailler avec JavaScript : comment fonctionnent les prototypes et les héritages
Bon développement !
Commentaires
Aucun commentaire pour l'instant. Soyez le premier.