JavaScript Local Storage Le navigateur web en tant que datastore
Avec Javascript Local Storage, vous pouvez transformer votre navigateur en datastore. Autrement dit, vous pouvez définir et récupérer des objets dans le navigateur Web et stocker des données sans date d'expiration.
di Antonio Lamorgese
Javascript est sans aucun doute le langage le plus utilisé et le plus répandu dans le monde. Utile pour exécuter du code dans une fenêtre de navigateur Web. Au fil du temps, il est également devenu un langage très fiable et mature. Comme tous les langages, il se caractérise par la présence d’API qui enrichissent le langage de fonctionnalités extraordinaires. Depuis quelques années, l’API Web Storage, c’est-à-dire la bibliothèque qui s’occupe de la gestion du stockage des objets, utilisée dans la phase d’exécution du code Javascript, a été mise à jour avec l’implémentation de deux nouvelles propriétés gérées par l’objet window. Les deux propriétés en question sont: localStorage et sessionStorage. Les deux créent « Javascript Local Storage« . Un environnement qui transformera votre navigateur web en une véritable banque de données locale d’objets.
Index du contenu..
1. Différence entre Cookie, localStorage et sessionStorage
Vous vous demandez sûrement : « Quelle différence y a-t-il entre gérer un datastore à l’aide de cookies et une gestion réalisée à l’aide de localStorage et de sessionStorage ? » La question est plus que pertinente et, pour être honnête, je suis content que vous l’ayez posée. Comme vous le savez bien, les langages de programmation évoluent et cette évolution est souvent imposée par des facteurs qui imposent un niveau de gestion de la sécurité toujours plus élevé. Surtout dans l’environnement Web. En fait, ils travaillent sur la même politique d’origine. Par conséquent, les données stockées côté client ne seront disponibles que sur cette source. Contrairement aux cookies, localStorage et sessionStorage ont des limites de mémoire plus larges pour le stockage des données. Vous vous souviendrez qu’avec les cookies, vous disposiez d’un maximum de 4 Ko. Eh bien, localStorage et sessionStorage ont un bon 5 Mo disponible pour l’ensemble du magasin de données. De plus, comme les données ne peuvent être gérées que du côté client, elles ne seront pas envoyées de temps en temps au serveur, ce qui réduira le trafic entre le client et le serveur.
Lire la suite: Le meilleur éditeur de photos pour retouche photos gratuit
2. Stockage local Javascript en action
Maintenant, après avoir dissipé toutes sortes de doutes sur l’utilisation de Javascript Local Storage, revenons aux propriétés localStorage et sessionStorage. Comme tout ce qui concerne le développement en général, un bon exemple est la ressource la plus importante pour expliquer en détail la mise en œuvre et l’utilisation de ces deux propriétés fondamentales. Cependant, je prévois d’abord que pour définir et récupérer des données à partir du magasin de données du navigateur, à la fois localStorage et sessionStorage, ils utilisent deux méthodes qui ne laissent aucun doute sur leur fonction. Les deux méthodes sont: setItem et getItem. Dans les deux exemples suivants, dont vous pouvez tester le code, par copier-coller, dans votre page html, les deux méthodes sont implémentées avec une simplicité désarmante.
exemple de localStorage:
<! DOCTYPE html>
<html>
<body>
<h1> How localStorage works </h1>
<h2> The localStorage property </h2>
<p> The name stored in localStorage is: </p>
<p id = "demo"> </p>
<script>
// -------------------------------
// Set the "lastname" variable
// -------------------------------
localStorage.setItem ("lastname", "Smith");
// -----------------------------------------------
// Get the content of the "lastname" variable
// and displays it in the "demo" paragraph
// -----------------------------------------------
document.getElementById ("demo"). innerHTML = localStorage.getItem ("lastname");
</script>
</body>
</html>
exemple de sessionStorage:
<html>
<body>
<h1> How sessionStorage works </h1>
<h2> The sessionStorage property </h2>
<p> The Name is: </p>
<p id = "demo"> </p>
<script>
// -------------------------------------------
// Set the "lastname" session variable
// -------------------------------------------
sessionStorage.setItem ("lastname", "Smith");
// ------------------------------------------------ -----------
// Get the contents of the session variable "lastname"
// and displays it in the "demo" paragraph
// ------------------------------------------------ -----------
let personName = sessionStorage.getItem ("lastname");
document.getElementById ("demo"). innerHTML = personName;
</script>
</body>
</html>
Le code ne laisse aucun doute. Comprendre le fonctionnement de ces deux propriétés extraordinaires de l’objet fenêtre est extrêmement simple. Cependant, il convient de préciser quand utiliser localStorage et quand utiliser sessionStorage. La différence substantielle entre localStorage et sessionStorage concerne uniquement la visibilité qu’ont les objets traités au sein du datastore d’un navigateur. En effet, alors qu’avec sessionStorage les objets ne sont visibles que pour la fenêtre/l’onglet dans lequel ils ont été définis et restent actifs jusqu’à la fermeture de la fenêtre/l’onglet du navigateur qui les a générés. Avec localStorage, les données persistent jusqu’à ce qu’elles soient explicitement supprimées et, si elles ne sont pas supprimées, elles seront également disponibles pour de futures visites sur la page Web, mais uniquement sur la même origine. Les données stockées avec localStorage n’ont pas de date d’expiration.
3. Supprimer les objets localStorage
Comme mentionné précédemment, Javascript a été enrichi de deux propriétés. Le premier, localStorage, très pratique et largement utilisé par les développeurs, capable de stocker des données dans le navigateur, mais, après la fermeture de la fenêtre/onglet du navigateur qui a généré les données, les informations continueront à persister jusqu’à ce que le développeur ne les supprime pas explicitement. La deuxième propriété, sessionStorage, définit les objets de session. Quant à sessionStorage, gérant les objets de session, ils seront automatiquement supprimés à la fermeture du navigateur ou de la fenêtre/onglet qui les a générés. Tandis que l’élimination des objets, générés avec la propriété localStorage, se produit explicitement. Cela signifie que le programmeur gérera sa vie.
La suppression d’objets créés par localStorage est très simple. En fait, cette propriété possède une méthode « removeItem » qui reçoit en paramètre l’objet à supprimer. Ainsi, si vous souhaitez supprimer l’objet « lastname », présent dans les deux scripts abordés dans le paragraphe précédent, vous devez exécuter cette commande:
localStorage.removeItem ('lastname');Après avoir exécuté cette commande, l’objet « lastname » sera complètement supprimé du magasin de données du navigateur. Tant que cette opération n’est pas effectuée, tous les objets, créés avec la propriété localStorage, seront toujours disponibles, même après des jours, sur la même origine. Autrement dit, le même ordinateur et le même navigateur accéderont aux objets localStorage jusqu’à ce qu’ils soient explicitement supprimés.
4. Conclusions
Pour dissiper tout doute sur l’utilisation de ces deux nouvelles propriétés extraordinaires de l’objet fenêtre, je vous recommande de suivre ce court tutoriel vidéo qui vous permettra de comprendre en détail les différences entre ces deux propriétés fondamentales.
