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

Vous pouvez utiliser le key méthode. localStorage.key(index) renvoie le index (l'ordre est défini par l'implémentation mais est 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 l'ordre est important, vous pouvez stocker un tableau sérialisé en JSON :

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

Le projet de spécification affirme que tout objet qui supporte clone structuré peut être une valeur. Mais cela ne semble pas encore être supporté.

EDIT : Pour charger le tableau, l'ajouter, puis le stocker :

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

Answer 2

La méthode la plus simple est la suivante :

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

Answer 3

En plus de toutes les autres réponses, vous pouvez utiliser 0,00 $ par personne fonction de la bibliothèque jQuery :

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

  // key magic
  // value magic

});

Finalement, obtenir l'objet avec :

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

Answer 4

for (const [key, value] of Object.entries(localStorage)) {
   console.log(key, value);
}

Ici, nous bouclons à travers chaque clé et valeur respectivement dans le stockage local.

Answer 5

Cela fonctionne pour moi dans Chrome :

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