Comment stocker et récupérer des données dans le navigateur
Cet article discutera de la procédure pour stockage et récupération des données dans le navigateur. De plus, des exemples liés à l'utilisation des objets Web localStorage et SessionStorage seront fournis. Alors, commençons!
Objets de stockage Web dans le navigateur
Deux objets de stockage Web sont fournis par le HTML, que vous pouvez utiliser pour stocker et récupérer les données. "stockage local«Est un type de stockage HTML qui n'a pas de date d'expiration, tandis que le«SessionStorage»Objet Stockez uniquement les informations liées à une seule session, ce qui signifie que la fermeture de l'onglet Browser actuel supprimera toutes les données enregistrées.
Avant d'utiliser LocalStorage et SessionStorage, assurez-vous que le stockage Web HTML est pris en charge par votre navigateur:
if (typeof (stockage) !== "Undefined")// Écrivez du code pour les objets de stockage HTML
autre
// Ton navigateur n'est pas supporté
Objet de stockage Web localStorage HTML dans le navigateur
Comme mentionné précédemment, les données stockées dans l'objet LocalStorage n'ont pas de date d'expiration, et elle n'est pas supprimée même si votre navigateur est fermé. Les données stockées peuvent être récupérées le lendemain, la semaine ou l'année.
Exemple 1: Utilisation de l'objet de stockage Web localStorage HTML dans le navigateur
Dans l'exemple donné ci-dessous, nous créerons un «stockage local«Objet Web ayant un«Nom: valeur" paire:
Exécutez le programme donné ci-dessus dans votre éditeur de code préféré ou tout autre bac à sable codant en ligne; Cependant, nous utiliserons le JSBIN à cet effet:
Comme vous pouvez le voir sur la sortie, nous avons réussi à stocker et récupérer des données à l'aide du «stockage local»Objet Web HTML:
Vous pouvez également exécuter le code suivant dans le même but:
L'exemple fourni vous montrera également la même sortie:
Si vous souhaitez supprimer un article ou une entrée de votre objet LocalStorage, vous devez appeler le «retirer l'objet()«Méthode et passez le«nom”Article comme argument:
stockage local.supprimertem ("nom");Exemple 2: Utilisation de l'objet de stockage Web localStorage HTML dans le navigateur
Voyons un autre exemple. Dans le programme JavaScript donné ci-dessous, le «stockage local"L'objet comptera et stockera le nombre de fois qu'un utilisateur a cliqué sur"Cliquez sur" bouton:
Cliquez sur le bouton pour vérifier la valeur du compteur.
Ici, la sortie montre un «Cliquez sur" bouton; Cliquez dessus pour vérifier la valeur ButtonClickCounter:
Initialement, la valeur de ButtonClickCounter a été définie sur «0,»Et il sera incrémenté chaque fois que nous cliquerons sur le bouton:
SessionStorage HTML Web Storage Objet dans le navigateur
Le HTML "SessionStorage"L'objet fonctionne de la même manière que"stockage local«;; Cependant, vous ne pouvez l'utiliser que pour stocker et récupérer des données pour la session en cours. Dès que l'onglet du navigateur ouvert est fermé, toutes les données stockées seront supprimées.
Exemple 2: Utilisation d'objet de stockage Web HTML SessionStorage dans le navigateur
Le programme JavaScript suivant stockera et récupérera le «ButtonClickCount»Pour la session en cours. Le ButtonClickCount est ajouté pour compter le nombre de fois qu'un utilisateur a cliqué sur le bouton fourni:
Cliquez sur le bouton pour vérifier la valeur du compteur.
Appuyer sur le bouton mis en surbrillance consiste à récupérer les données stockées dans le "SessionStorage" bouton:
Conclusion
Les développeurs peuvent utiliser stockage local et SessionStorage Objets Web HTML pour stocker et récupérer des données dans le navigateur. L'objet localStorage n'a pas de date d'expiration, tandis que SessionStorage stocke uniquement les informations liées à une seule session, ce qui signifie que la fermeture de l'onglet Browser actuel supprimera toutes les données enregistrées. Cet article a discuté de la procédure de stockage et de récupération de données dans le navigateur. De plus, des exemples liés à l'utilisation des objets Web localStorage et SessionStorage HTML sont également fournis.