Javascript : Différence entre le LocalStorage & SessionStorage
Cet article couvrira les concepts localStorage et sessionStorage, ainsi que les différences entre les deux. On verra les principales méthodes utilisées pour travailler avec c’est deux API. L’avantage de ces options de stockage est qu’elles sont assez simples à utiliser, de plus les méthodes sont commune aux deux.
Table of Contents
Introduction
Les deux API, localStorage et sessionStorage vous donnent la possibilité de stocker des informations localement dans le navigateur via des paires clé => valeur. Les données stockées pour l’un ou l’autre API sont spécifiques au domaine. Cela signifie que les informations stockées sur un site ne seront pas accessibles à un site avec un domaine complètement différent.
Vous pouvez facilement afficher le « stockage local » et « session local » à partir des outils de développement de votre navigateur. La console outils est accessible via la touche F12, ou alors dans le menu du navigateur.
Chrome : accédez à l’onglet Applications -> Recherchez la section Stockage -> Ouvrez le menu déroulant « Local Storage » ou « Session Storage« .
Firefox : allez dans l’ onglet Stockage -> Basculez pour ouvrir le menu déroulant « Stockage local » ou « Stockage de session« .
Les différences
Le localStorage n’a pas de date d’expiration et persistera jusqu’à ce que vous l’effaciez manuellement de votre navigateur. Cela peut inclure n’importe quoi, de la suppression du cache à l’entrée manuelle et à la suppression des données via les outils de développement.
D’autre part, sessionStorage sera supprimé une fois que la vie de la page se termine, soit fermant votre navigateur ou votre onglet. En raison de cette limitation, sessionStorage est rarement utilisé par rapport à localStorage.
Ajout de données au stockage
Pour ajouter des données au stockage, vous définissez des paires clé-valeur à l’aide de la méthode setItem(‘key’, ‘value’), les valeurs que vous transmettez doivent être des chaînes. Vous pouvez également définir des types de données plus complexes comme des tableaux et des objets, mais vous devrez les convertir en une chaîne à l’aide de la méthode JSON.stringify(value).
/* Ajout d'un item au localStorage (Basique) */
localStorage.setItem('musician', 'Vladimir Horowitz');
/* Ajout d'un item au sessionStorage (Basique) */
sessionStorage.setItem('instrument', 'Piano');
/* Ajout d'un objet au localStorage */
let object = {name: 'Paul Desmond', instrument: 'Alto Saxophone'};
localStorage.setItem('musicianInfo', JSON.stringify(object));
Suppression des données du stockage
Vous pouvez supprimer un élément du stockage via la removeItem(keyName) méthode. Cette méthode accepte une chaîne du nom de la clé que vous souhaitez supprimer.
localStorage.removeItem('musician');
sessionStorage.removeItem('musician');
Récupération des données du stockage
Vous pouvez récupérer un élément du stockage via la getItem(keyName) méthode. Comme removeItem(), cette méthode accepte également une chaîne du nom de la clé avec laquelle vous souhaitez interagir.
Lorsque vous devez dé-stringifier un objet qui a été stocké, vous pouvez utiliser JSON.parse() pour analyser la chaîne et la reconvertir en objet.
/* Récupération d'une seul valeur */
let musician = sessionStorage.getItem('musician');
/* Parsage d'un objet avec un JSON */
let data = localStorage.getItem("musicianInfo");
let musicianInfo = JSON.parse(data);
Effacement du stockage
Pour supprimer tous les éléments du stockage, utilisez la clear() méthode. Cette méthode est assez brutale mais très efficace.
localStorage.clear(); sessionStorage.clear();
Bilan et avertissement
Avec seulement quelques méthodes, vous pouvez rapidement être opérationnel avec le stockage local et de session. Étant donné que les données stockées sont facilement accessibles à partir du navigateur, vous ne devriez envisager d’utiliser ces options de stockage que si les données que vous souhaitez conserver contiennent des informations non sensibles .
Source
Article source : https://blog.alyssaholland.me/local-storage-vs-session-storage
