Comment utiliser localStorage en JavaScript

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.

localStorage 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.

window.localStorage.setItem('Python', 'Guido van Rossum');const student = {
name: "Yuvraj",
marks: 85,
subject: "Machine Learning"
}
const scores = [76, 77, 34, 67, 88];
window.localStorage.setItem('result', JSON.stringify(student));
window.localStorage.setItem('marks', 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.

let data1 = window.localStorage.getItem('Python');
let data2 = window.localStorage.getItem('result');console.log(data1);
console.log(data2);

Cela produit la sortie suivante :

Guido van Rossum
{"name":"Yuvraj","marks":85,"subject":"Machine Learning"}

Si vous souhaitez convertir le résultat d’une chaîne en un objet, vous devez utiliser le JSON.parse() méthode.

let data2 = JSON.parse(window.localStorage.getItem('result'));
console.log(data2);

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.

window.localStorage.clear();

Comment trouver la longueur de localStorage

Vous pouvez trouver la longueur de localStorage en utilisant le localStorage.lengthlocalStorage.length propriété.

let len = localStorage.length;
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.

let 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.

for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}

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>
<body>
<h1>localStorage in JavaScript</h1>
<button onclick="increaseCounter()" type="button">Increase Score</button>
<button onclick="decreaseCounter()" type="button">Decrease Score</button>
<button onclick="clearCounter()" type="button">Clear localStorage</button>
<p>Score:</p>
<p id="score"></p>
<p>Click on the "Increase Score" button to increase the score count</p>
<p>Click on the "Decrease Score" button to decrease the score count</p>
<p>Click on the "Clear localStorage" button to clear the localStorage</p>
<p>
You can close the browser tab (or window), and try again.
You'll see that the data still persists and is not lost even after closing
the browser.
</p>
<script src="script.js"> </script>
</body>
</html>

Cette page contient trois boutons : Augmenter le score, Diminuer le scoreet 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.

function increaseCounter() {
var count = Number(window.localStorage.getItem("count"));
count += 1;
window.localStorage.setItem("count", count);
document.getElementById("score").innerHTML = count;
}

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.

function decreaseCounter() {
var count = Number(window.localStorage.getItem("count"));
count -= 1;
window.localStorage.setItem("count", count);
document.getElementById("score").innerHTML = count;
}

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.

function clearCounter() {
window.localStorage.clear();
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.

— to www.makeuseof.com

Magazine Gadgets