Le mécanisme localStorage fournit un type d'objet de stockage Web qui vous permet de stocker et de récupérer des données dans le navigateur. Vous pouvez stocker et accéder aux données sans expiration; les données seront disponibles même après qu'un visiteur ferme votre site.
Vous accéderez normalement à localStorage en utilisant JavaScript. Avec une petite quantité de code, vous pouvez créer un exemple de projet, comme un compteur de score. Cela montrera comment vous pouvez stocker et accéder à des données persistantes en utilisant uniquement du code côté client.
Qu'est-ce que localStorage en JavaScript ?
L'objet localStorage fait partie de l'API de stockage Web prise en charge par la plupart des navigateurs Web. Vous pouvez stocker des données sous forme de paires clé-valeur à l'aide de localStorage. Les clés et les valeurs uniques doivent être au format de chaîne DOM UTF-16.
Si vous souhaitez stocker des objets ou des tableaux, vous devrez les convertir en chaînes à l'aide de la JSON.stringify()
méthode. Vous pouvez stocker jusqu'à 5 Mo de données dans localStorage. De plus, toutes les fenêtres ayant la même origine peuvent partager les données localStorage de ce site.Un navigateur ne supprimera pas ces données même lorsqu'un utilisateur le ferme. Il sera disponible pour le site Web qui l'a créé lors de toute session future. Cependant, vous ne devez pas utiliser localStorage pour les données sensibles car d'autres scripts exécutés sur la même page peuvent y accéder.
stockage local vs. sessionStorage
La localStorage et sessionStorage les objets font partie de l'API Web Storage qui stocke les paires clé-valeur localement. Tous les navigateurs modernes les prennent en charge. Avec localStorage, les données n'expirent pas même après qu'un utilisateur ferme son navigateur. Cela diffère de sessionStorage qui efface les données lorsque la session de la page se termine. Une session de page se termine lorsque vous fermez un onglet ou une fenêtre.
Le code utilisé dans ce projet est disponible dans un Référentiel GitHub et est libre d'utilisation sous la licence MIT. Si vous souhaitez jeter un œil à une version en direct du projet de compteur de score, vous pouvez consulter le live démo.
Comment fonctionne le stockage local ?
Vous pouvez accéder à la fonctionnalité localStorage via le Window.localStorage propriété. Cette propriété fournit plusieurs méthodes telles que setItem(), getItem() et removeItem(). Vous pouvez les utiliser pour stocker, lire et supprimer des paires clé/valeur.
Comment stocker des données dans localStorage
Vous pouvez stocker des données dans localStorage en utilisant le setItem() méthode. Cette méthode accepte deux arguments, la clé et la valeur correspondante.
window.localStorage.setItem('Python', 'Guido van Rossum');Ici, Python est la clé et Guido van Rossum est la valeur. Si vous souhaitez stocker un tableau ou un objet, vous devrez le convertir en chaîne. Vous pouvez convertir un tableau ou un objet en une chaîne à l'aide de la JSON.stringify() méthode.
la fenêtre.localStorage.setItem('Python', 'Guido van Rossum');constante étudiant = {
nom: "Yuvraj",
Des marques: 85,
Sujet: "Apprentissage automatique"
}
constante scores = [76, 77, 34, 67, 88];
la fenêtre.localStorage.setItem('résultat', JSON.stringify (étudiant));
la fenêtre.localStorage.setItem('marques', JSON.stringify (scores));
Comment lire des données à partir de localStorage
Vous pouvez lire les données de localStorage en utilisant le obtenir l'article() méthode. Cette méthode accepte la clé comme paramètre et renvoie la valeur sous forme de chaîne.
laisser données1 = la fenêtre.localStorage.getItem('Python');
laisser données2 = la fenêtre.localStorage.getItem('résultat');
console.log (données1);
console.log (données2);
Cela produit la sortie suivante :
Guido van Rossum
{"Nom":"Yuvraj","Des marques":85,"matière":"Apprentissage automatique"}Si vous souhaitez convertir le résultat d'une chaîne en un objet, vous devez utiliser le JSON.parse() méthode.
laisser données2 = JSON.parse(la fenêtre.localStorage.getItem('résultat'));
console.log (données2);Comment supprimer des sessions localStorage
Vous pouvez supprimer des sessions localStorage à l'aide de retirer l'objet() méthode. Vous devez passer la clé en tant que paramètre à cette méthode pour supprimer la paire clé-valeur. Si la clé existe, la méthode supprimera la paire clé-valeur et si la clé n'existe pas, la méthode ne fera rien.
window.localStorage.removeItem('Python');
window.localStorage.removeItem('C++');Comment effacer tous les éléments dans localStorage
Vous pouvez effacer tous les éléments du stockage local à l'aide de la dégager() méthode. Vous n'avez pas besoin de passer de paramètre à cette méthode.
la fenêtre.stockage local.dégager();Comment trouver la longueur de localStorage
Vous pouvez trouver la longueur de localStorage en utilisant le localStorage.lengthlocalStorage.length propriété.
laisser len = localStorage.longueur ;
console.log (len);Comment obtenir la clé à une position donnée
Vous pouvez obtenir la clé sur une position donnée en utilisant le clé() méthode. Cette méthode accepte l'index comme paramètre.
laisser d = localStorage.key(1);
console.log (d);La méthode key() est principalement utilisée pour parcourir tous les éléments de localStorage.
Comment parcourir tous les éléments de localStorage
Vous pouvez itérer sur tous les éléments de localStorage à l'aide d'une boucle for.
pour (laisser je = 0; je < localStorage.longueur; je++){
laisser clé = localStorage.clé (i);
laisser valeur = localStorage.getItem (clé);
console.log (clé, valeur) ;
}La méthode key() accepte l'index comme argument et renvoie la clé correspondante. La méthode getItem() accepte la clé comme argument et renvoie la valeur correspondante. Enfin, le console.log() La méthode imprime la paire clé-valeur.
Projet JavaScript simple basé sur localStorage
Avec une compréhension de ses méthodes de base, vous pouvez développer un projet JavaScript simple basé sur localStorage. Dans ce projet, vous allez créer une application de compteur de score qui augmentera et diminuera le nombre de scores en fonction d'un clic sur un bouton. En outre, vous implémenterez une fonctionnalité pour effacer tous les éléments dans localStorage.
Créé un index.html et script.js fichier dans un nouveau dossier et ouvrez les fichiers dans votre éditeur de code préféré. Utilisez le code HTML suivant pour créer une interface pour l'application de compteur de score :
<!DOCTYPE html>
<html>
<corps>
<h1>stockage local en JavaScript</h1>
<bouton onclick="augmenterCompteur()" taper="bouton">Augmenter le score</button>
<bouton onclick="diminuerCompteur()" taper="bouton">Diminuer le score</button>
<bouton onclick="clearCounter()" taper="bouton">Effacer le stockage local</button>
<p>Score:</p>
<p id="score"></p>
<p>Clique sur le "Augmenter le score" bouton pour augmenter le nombre de points</p>
<p>Clique sur le "Diminuer le score" bouton pour diminuer le nombre de points</p>
<p>Clique sur le "Effacer le stockage local" bouton pour effacer le localStorage</p>
<p>
Vous pouvez fermer l'onglet du navigateur (ou la fenêtre), et essayer encore.
Vous verrez que les données persistent toujours etestne pas perdu même après la fermeture
le navigateur.
</p>
<script src="script.js"></script>
</body>
</html>Cette page contient trois boutons: Augmenter le score, Diminuer le score, et Effacer le stockage local. Ces boutons appellent le augmenterCompteur(), diminuerCompteur(), et clearCounter() fonctions respectivement. Utilisez le code suivant pour ajouter des fonctionnalités à l'application de compteur de score à l'aide de JavaScript.
fonctionaugmenterCompteur() {
var compter = Numéro(la fenêtre.localStorage.getItem("count"));
compter += 1 ;
window.localStorage.setItem("compter", compter);
document.getElementById("score").innerHTML = compter;
}La augmenterCompteur() La fonction récupère le nombre à l'aide de la méthode getItem(). Il convertit le résultat en nombre, puisque getItem() renvoie une chaîne et la stocke dans la variable count.
La première fois que vous cliquez sur le Augmenter le score sera avant tout appel à setItem(). Votre navigateur ne trouvera pas le compter clé dans localStorage, il renverra donc une valeur nulle. Étant donné que la fonction Number() renvoie 0 pour une entrée nulle, elle n'a pas besoin de traitement de cas particulier. Le code peut augmenter en toute sécurité la valeur de comptage avant de la stocker et de mettre à jour le document pour afficher la nouvelle valeur.
fonctiondiminuerCompteur() {
var compter = Numéro(la fenêtre.localStorage.getItem("count"));
compter -= 1 ;
window.localStorage.setItem("compter", compter);
document.getElementById("score").innerHTML = compter;
}La diminuerCompteur() fonction récupère et vérifie les données comme augmenterCompteur() Est-ce que. Il décrémente le compter variable par 1, qui par défaut est 0.
fonctionclearCounter() {
la fenêtre.stockage local.dégager();
document.getElementById("score").innerHTML = "";
}Enfin, le clearCounter() la fonction supprime toutes les données de localStorage à l'aide de la dégager() méthode.
Faites-en plus avec localStorage
L'objet localStorage a plusieurs méthodes dont setItem(), getItem(), removeItem() et clear(). Bien que localStorage soit facile à utiliser, il n'est pas sûr de stocker des informations sensibles. Mais c'est un bon choix pour développer des projets qui ne nécessitent pas beaucoup de stockage et n'impliquent aucune information sensible.
Vous souhaitez créer un autre projet JavaScript basé sur localStorage? Voici une application de liste de tâches de base que vous pouvez développer à l'aide de HTML, CSS et JavaScript.
