LocalStorage et SessionStorage | Expliqué

L'API Web et l'API de stockage Web sont deux des API les plus utiles qui sont prises en charge par la plupart des navigateurs, l'API de stockage Web prouve deux objets stockage local stockage et le SessionStorage qui nous aident à stocker nos données dans la mémoire du navigateur. Ces deux objets nous permettent de stocker les données localement, la seule différence étant qu'avec l'objet SessionStorage, les données sont automatiquement supprimées lorsque la session expire, tandis qu'avec l'objet LocalStorage, les données sont enregistrées en permanence.

Ces objets peuvent être considérés comme des alternatives pour les cookies et avoir leurs avantages par rapport aux cookies, disant que ces objets peuvent complètement dépasser les cookies n'est pas vrai. Les cookies peuvent être lus par des serveurs et d'autres applications Web tandis que les données stockées localement sur votre navigateur ne peuvent être lues par aucun serveur, ce serveur offre des avantages de sécurité.

LocalStorage et SessionStorage | Syntaxe

Ces deux objets ont des fonctions identiques avec des syntaxes identiques. La syntaxe de l'objet localStorage est définie comme

stockage local.fonction (clé, valeur);

De même, pour l'objet SessionStorage, la syntaxe est définie comme

SessionStorage.fonction (clé, valeur);

Fonctions fournies par LocalStorage & SessionStorage

Ces deux objets de l'API de stockage Web fournissent 5 fonctions et une variable constant comme:

• setItem (): pour stocker une nouvelle entrée dans le stockage local sous la forme de paires de valeurs clés
• getItem (): pour récupérer une entrée du stockage local en utilisant sa clé
• clear (): pour effacer le stockage local du navigateur
• retirer (): pour supprimer une valeur du stockage local à l'aide d'une clé
• key (): pour renvoyer le nom de la clé en utilisant sa valeur d'index
• length (): une variable qui stocke le nombre d'entrées dans le stockage local

LocalStorage et SessionStorage | Usage

Pour démontrer l'utilisation de l'API de stockage Web, ouvrez le navigateur de votre choix (Chrome dans notre cas) et visitez un site comme www.Google.com.

Comment créer / ajouter des données dans LocalStorage à l'aide de la méthode SetItem ()

Créez une nouvelle entrée de données dans le stockage local en tapant la ligne de code suivante dans la console du navigateur:

stockage local.setItem ("nom", "John Doe");

Si la commande s'exécute sans aucune erreur, cela signifie qu'une nouvelle entrée a été effectuée avec succès dans le stockage du navigateur.

Pour vérifier cela, accédez à l'onglet «Applications» dans les outils du développeur et élargissez le stockage local. Vous devriez pouvoir voir la valeur dans l'explorateur:

Comment accéder / obtenir des données de LocalStorage à l'aide de GetItem ()

Pour accéder à n'importe quelle entrée à partir du stockage local, vous pouvez soit utiliser un opérateur de points avec l'objet localStorage, puis saisir la clé ou utiliser la fonction getItem (). Pour accéder au «nom» que nous venons de stocker, nous pouvons soit utiliser:

var name = localstorage.Nom;
console.journal (nom)

La sortie est comme:

Ou nous pouvons utiliser la commande comme indiqué:

console.journal (localstorage.getItem ("nom"));

La sortie est comme

Stockage permanent de l'objet localstorage | Vérification

Pour vérifier que les objets locaux stocke les données de façon permanente (jusqu'à ce qu'elles soient supprimées manuellement), fermez les navigateurs qui avaient précédemment ouvert le lien où vous avez stocké certaines données (dans notre cas, c'était Google.com)

Vous avez mis fin à la poignée de main d'or et terminé les sessions actuelles avec le site Web en fermant les navigateurs, en rouvrez le navigateur et en vous dirigez vers le même site Web, puis accédez aux outils de développeur> Applications> Stockage local pour vérifier si les données sont toujours là ou non :

Toutes les étapes ci-dessus peuvent être effectuées avec l'objet SessionStorage, mais n'oubliez pas qu'il supprimera toutes les données à l'expiration de la session. Voyons la démonstration.

Comment créer / ajouter des données dans SessionStorage à l'aide de la méthode SetItem ()

Nous allons d'abord créer une nouvelle entrée dans le SessionStorage avec la ligne de code suivante:

SessionStorage.setItem ("travail", "auditeur");

La console affiche «non définie», ce qui signifie que la commande a été exécutée avec succès sans aucune erreur:

Nous pouvons vérifier le stockage sous l'onglet Stockage de session:

Fermez les navigateurs et rouvrez le même lien, puis accédez aux outils du développeur> Applications> Sessions Storage, vous verrez les résultats suivants:

Vous pouvez voir que l'entrée a été supprimée, cela prouve que l'objet SessionStorage ne stocke que des données dans le stockage local du navigateur pour une seule session.

Conclusion

Les objets LocalStorage et SessionStorage sont utilisés pour stocker des données dans le stockage local du navigateur et ils font partie de l'API de stockage Web; Ces deux objets fournissent 5 fonctions à l'utilisateur qui permet aux utilisateurs de créer, mettre à jour, obtenir et supprimer une entrée du stockage local. La différence entre l'objet LocalStorage et SessionStorage est que l'objet LocalStorage stocke en permanence les données contre un site Web tandis que l'objet SessionStroage ne stocke que les données pour une seule session.