Boucle dans localStorage en HTML5 et JavaScript

Question

Je me disais donc que je pourrais simplement boucler sur localStorage comme un objet normal puisqu'il a une longueur. Comment puis-je boucler dans cet objet ?

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

Si je fais un localStorage.length il retourne 3 ce qui est correct. Donc je suppose qu'un for...in La boucle fonctionnerait.

Je pensais à quelque chose comme :

for (x in localStorage){
    console.log(localStorage[x]);
}

Mais sans succès. Des idées ?

L'autre idée que j'ai eue était quelque chose comme

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

Dans lequel le for...in fonctionne.

Answer 1

localStorage est un Object .

Nous pouvons le parcourir en boucle avec JavaScript pour/dans la déclaration comme tout autre objet.

Et nous allons utiliser .getItem() pour accéder à la valeur de chaque clé (x).

for (x in localStorage){
    console.log(localStorage.getItem(x));
}

Answer 2

Dans le prolongement de la réponse précédente, voici une fonction qui va parcourir le stockage local par clé sans connaître les valeurs des clés.

function showItemsByKey() {
   var typeofKey = null;
   for (var key in localStorage) {
       typeofKey = (typeof localStorage[key]);
       console.log(key, typeofKey);
   }
}

Si vous examinez la sortie de la console, vous verrez que les éléments ajoutés par votre code ont tous un typeof string. Alors que les éléments intégrés sont soit des fonctions {[code natif] }, soit un nombre dans le cas de la propriété length. Vous pourriez utiliser la variable typeofKey pour filtrer uniquement sur les chaînes de caractères afin que seuls vos éléments soient affichés.

Notez que cela fonctionne même si vous stockez un nombre ou un booléen comme valeur, car ils sont tous deux stockés sous forme de chaînes de caractères.

Answer 3

Toutes ces réponses ignorent les différences entre les implémentations de localStorage dans les navigateurs. Les contributeurs dans ce domaine devraient fortement qualifier leurs réponses avec les plateformes qu'ils décrivent. Une implémentation pour l'ensemble des navigateurs est documentée à l'adresse https://developer.mozilla.org/en/docs/Web/API/Window/localStorage et, bien que très puissant, ne contient que quelques méthodes de base. Pour parcourir le contenu, il faut comprendre l'implémentation spécifique à chaque navigateur.

Answer 4

Le localStorage enregistre les données sous forme de paires clé-valeur et les valeurs sont accessibles par la fonction localStorage.getItem(key), qui prend une clé comme paramètre et renvoie la valeur de la paire clé-valeur avec la clé donnée.

Les paires clé-valeur du localStorage peuvent être définies avec la fonction localStorage.setItem(key, value).

Si vous voulez itérer dans le LocalStorage, vous pouvez utiliser des nombres comme clés.

localStorage.setItem(localStorage.length, value);

Avec cette instruction ci-dessus, vous ajoutez une valeur avec une clé ascendante au localStorage, car la longueur du localStorage est augmentée à chaque appel.

Maintenant, le LocalStorage peut être itéré avec la boucle for suivante.

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

Il importe peu que vous utilisiez "let" ou "var" pour déclarer une variable. La différence entre les deux est la portée. Si vous voulez en savoir plus sur la différence entre let et var, je vous recommande l'explication de tutorialspoint ( https://www.tutorialspoint.com/difference-between-var-and-let-in-javascript ).