Fonctionnement de l’API de stockage Web

Les navigateurs Web ont parcouru un long chemin, des cookies à l’API Web Storage. Comprenons ces plus sessionStorage vs localStorage.

L’API Web Storage est l’une des clés les plus essentielles pour le développement Web moderne et les navigateurs Web. Cela a facilité le développement Web pour les développeurs, car il a permis aux cookies de stocker des données dans les navigateurs Web. Pour les utilisateurs, cela permet une navigation plus intuitive et améliorée.

Les navigateurs Web sont une partie importante d’Internet. Ils sont chargés de nous aider à accéder au World Wide Web. Un navigateur Web gère l’accès à n’importe quelle partie d’Internet. Il ne serait pas possible de faire la majorité des choses que nous faisons sur Internet aujourd’hui sans un navigateur Web : faire des achats en ligne, regarder des vidéos, télécharger des livres, télécharger des photos, jouer à des jeux, etc. Les navigateurs ont rendu Internet plus riche, offrant un accès à tout type de contenu sous quelque forme que ce soit.

La mort du navigateur web le plus notoire de tous les temps, Internet Explorer, marque la fin d’une époque. C’était un navigateur Web très célèbre et important à un moment donné de l’histoire du Web, mais, en raison du rythme d’innovation des navigateurs Web, il était tombé en disgrâce.

L’innovation dans le domaine des navigateurs Web est énorme. La prise en charge de nouvelles API est publiée dans chaque nouvelle version. Les navigateurs modernes prennent en charge de nombreuses fonctionnalités différentes qui n’auraient pas été possibles au cours des décennies précédentes. Le rythme de l’innovation pousse les navigateurs Web à être de plus en plus modernes, fiables, structurés et accessibles.

Nous en apprendrons davantage sur l’API Web Storage et sur la manière dont elle contribue à cette innovation, mais commençons d’abord par comprendre le fonctionnement des cookies.

Biscuits

Vous êtes-vous déjà demandé comment un site Web se souvient de vous après votre départ ? Parfois, vous devez vous connecter, mais parfois ce n’est pas nécessaire car le site Web se souvient de vous.

Les cookies sont de petites données stockées sous forme de fichier texte sur le navigateur d’un utilisateur par un site Web. Les cookies associent des bits de données à un utilisateur spécifique. Il s’agit d’une donnée stockée sur votre navigateur par un site Web qui est automatiquement jointe à chaque demande. A chaque requête, des cookies seront envoyés au serveur avec l’en-tête HTTP.

Ils sont conçus pour contenir une quantité modeste de données spécifiques à un client et à un site Web particuliers et sont accessibles soit par le serveur Web, soit par l’ordinateur client. Cela permet au serveur de fournir une page adaptée à un utilisateur particulier, ou la page elle-même peut contenir un script qui est conscient des données contenues dans le cookie et est donc capable de transporter des informations d’une visite sur le site Web (ou site connexe) à le suivant.
— Que sont les cookies ?

Un cookie est composé d’un nom, d’une valeur, d’une date de fin, d’une taille en octets. Il stocke certaines informations vous concernant en tant qu’utilisateur, vos préférences et paramètres pour aider le site Web à personnaliser votre expérience utilisateur.

Pendant longtemps, les cookies ont été le seul moyen de stocker des informations sur les utilisateurs accédant à un site Web sur un navigateur. Ils ont été utilisés pour de nombreuses choses différentes : stocker les données du panier, stocker les paramètres de l’utilisateur, garder un utilisateur connecté pendant un certain temps, etc.

La version finale de HTML5 en 2014 a tout changé pour le Web. La dernière mise à jour avant cela date de 1999 et le nombre d’internautes dans le monde a considérablement augmenté. L’ère des smartphones, des tablettes et de nombreux autres appareils mobiles était arrivée, introduisant de nouveaux défis pour les ingénieurs et les développeurs de logiciels.

HTML5 a été publié pour apporter plus de cohérence au Web. Il a été publié pour rendre le processus de création d’applications Web plus facile et accessible à tous. De nouveaux éléments ont été introduits et quelques éléments ont été obsolètes. De nouveaux attributs, de nouvelles API et une nouvelle façon de stocker les données dans le navigateur étaient apparus.

API de stockage Web

L’API de stockage Web est un mécanisme dont disposent les navigateurs modernes et qui peut stocker des paires de données clé-valeur. Ajouté à HTML5, il traite uniquement les données côté client et de grandes quantités de données peuvent être stockées localement, sans affecter les performances du site Web.

Quels sont les avantages du Web Storage par rapport aux cookies ?

• Réduction de la bande passante – stocké côté client uniquement, il n’est donc pas attaché à chaque demande.
• Limite de taille — vous pouvez stocker de plus grandes quantités de données (stockage de 5 Mo par domaine).
• Prise en charge des types de données — ne prend en charge que les chaînes, mais la méthode JSON.stringify permet de stocker davantage de types de données.
• Date d’expiration – il offre un moyen de stocker des données de manière permanente (jusqu’à ce que l’utilisateur efface le cache du navigateur).

Un autre énorme avantage du stockage Web par rapport aux cookies est l’API accessible et intuitive. Pour obtenir ou définir des valeurs à l’aide de Web Storage, vous utilisez JavaScript et vous pouvez le faire en utilisant une seule méthode, comme getItem ou setItem.

Il existe deux mécanismes dans l’API Web Storage que nous pouvons utiliser pour stocker des données sur nos navigateurs : Stockage des sessions et Stockage local. Nous allons couvrir les deux mécanismes maintenant.

Stockage de session et stockage local

La sessionStorage l’objet stocke les données uniquement pour une session. Les données seront supprimées de sessionStorage après la fermeture du navigateur.

Chaque fois qu’une nouvelle page est chargée sur votre navigateur, une session de page unique est créée et attribuée à cette page particulière. Cette session n’est valide que pour cette page particulière. Lorsque vous ouvrez la même page dans plusieurs onglets différents, une nouvelle session unique est créée pour chaque onglet.

La localStorage l’objet stocke les données à travers les sessions du navigateur. Cela signifie que lorsque le navigateur est fermé, les données restent.

La principale différence entre les deux mécanismes est que sessionStorage stocke les données uniquement lorsque le navigateur est ouvert et localStorage continue à stocker des données après la fermeture du navigateur.

Comment ils travaillent

Tous les deux localStorage et sessionStorage sont disponibles via la propriété de l’objet window. Ils font partie de l’interface Windows en JavaScript.

Les deux mécanismes partagent les mêmes propriétés :

• setItem(key, value) – stocker la paire clé/valeur
• getItem(key) – obtenir la valeur par clé
• removeItem(key) – supprimer la clé avec sa valeur
• clear() – tout supprimer
• key(index) – obtenir la clé sur une position donnée
• length – le nombre d’éléments stockés

setItem

La setItem méthode est utilisée pour stocker des valeurs. Il prend deux paramètres : une clé et une valeur. La clé est une référence pour en obtenir la valeur ultérieurement.

Par exemple, imaginons que nous voulions enregistrer notre nom en utilisant le localStoragevoici comment nous procéderions :

window.localStorage.setItem('name', Leonardo');

obtenir l’article

La getItem méthode est utilisée pour accéder aux données stockées. Il n’accepte qu’un seul paramètre, qui est la clé de nos données. Si nous voulons obtenir notre nom qui est stocké dans localStoragevoici comment c’est fait :

window.localStorage.getItem('name');

retirer l’objet

La removeItem La méthode consiste à supprimer les valeurs stockées. En tant que paramètre, il reçoit une clé de l’élément que nous voulons supprimer. S’il n’y a pas d’élément associé à la clé donnée, cette méthode ne fera rien.

window.localStorage.removeItem('name');

dégager

La clear la méthode est similaire à removeItem mais à la place, il supprimera tous les éléments stockés. Il efface les données de ce domaine et ne reçoit aucun paramètre.

window.localStorage.clear();

clé

La key est très utile pour obtenir la clé d’un élément. Parfois, nous voulons obtenir la clé d’un élément spécifique, mais tout ce que nous avons est l’index – cette méthode fait exactement cela. Nous passons l’index en tant que paramètre et il renvoie la clé de cet élément.

window.localStorage.key(index);

L’API Web Storage est un excellent moyen de stocker des données sur votre navigateur. Cependant, il y a certains points que vous devez prendre en considération avant de stocker des données en l’utilisant :

• Ne stockez aucune donnée utilisateur sensible.
• Ne l’utilisez pas comme base de données (rappelez-vous qu’il n’a qu’une limite de 5 Mo).
• Il n’est pas sécurisé car il n’a aucune forme de protection des données et est accessible par n’importe quel code sur votre page Web.

Conclusion

Le Web a parcouru un long chemin, des cookies à l’API Web Storage. Nous pouvons stocker n’importe quel type de données que nous voulons aujourd’hui en utilisant uniquement des navigateurs et rien d’autre (veuillez ne stocker aucun type de données sensibles). La sessionStorage et localStorage ont quelques différences, mais à la fin de la journée, ils sont presque les mêmes. Les deux mécanismes peuvent être très utiles pour stocker des données.