Bouclage via localStorage en HTML5 et JavaScript

Donc, je pensais que je pourrais simplement boucler sur localStorage comme un objet normal car il a une longueur. Comment puis-je parcourir cela?

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

Si je fais un localStorage.lengthil retourne 3ce qui est correct. Je suppose donc qu'une for...inboucle fonctionnerait.

Je pensais à quelque chose comme:

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

Mais en vain. Des idées?

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

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

Dans lequel le for...infonctionne.

Vous pouvez utiliser la keyméthode. localStorage.key(index)renvoie la indexclé th (l'ordre est défini par l'implémentation mais constant jusqu'à ce que vous ajoutiez ou supprimiez des clés).

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

Si la commande est importante, vous pouvez stocker un tableau sérialisé JSON:

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

Le projet de spécification affirme que tout objet prenant en charge le clone structuré peut être une valeur. Mais cela ne semble pas encore pris en charge.

EDIT: Pour charger le tableau, ajoutez-y, puis stockez:

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

Le moyen le plus simple est:

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});

En plus de toutes les autres réponses, vous pouvez utiliser fonction $ .each de la bibliothèque jQuery:

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

Finalement, récupérez l'objet avec:

JSON .parse (localStorage.getItem (localStorage.key (clé)));

Cela fonctionne pour moi dans Chrome:

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}

En s'appuyant sur la réponse précédente, voici une fonction qui parcourra le stockage local par clé sans connaître les valeurs de clé.

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 une chaîne typeof. Alors que les éléments intégrés sont soit des fonctions {[code natif]}, soit dans le cas de la propriété length un nombre. Vous pouvez utiliser la variable typeofKey pour filtrer uniquement sur les chaînes 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.

Toutes ces réponses ignorent les différences entre les implémentations de localStorage dans les navigateurs. Les contributeurs dans ce domaine doivent fortement qualifier leurs réponses avec les plates-formes qu'ils décrivent. Une implémentation à l'échelle du navigateur est documentée à https://developer.mozilla.org/en/docs/Web/API/Window/localStorage et, bien que très puissante, ne contient que quelques méthodes de base. La lecture en boucle du contenu nécessite une compréhension de l'implémentation spécifique à chaque navigateur.

localStorageest un Object.

Nous pouvons le parcourir avec JavaScript for / in Statement comme n'importe quel autre objet.

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

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