web-dev-qa-db-fra.com

Boucle dans le stockage local en HTML5 et JavaScript

Donc, je pensais que je pourrais simplement faire une boucle dans LocalStorage comme un objet normal car il a une longueur. Comment puis-je faire une boucle?

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

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

Je pensais quelque chose comme:

for (x in localStorage){
    $('body').append(localStorage[x]);
}

Mais rien n'y fait. 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...in fonctionne.

javascripthtml5loopsobjectlocal-storage
72
Oscar Godson

Vous pouvez utiliser la méthode key . localStorage.key(index) renvoie la clé indexth (la commande est définie par l'implémentation mais est constante 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 compte, 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 clone structuré peut être une valeur. Mais cela ne semble pas encore être supporté.

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));
120
Matthew Flaschen

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

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

  // key magic
  // value magic

});

Finalement, obtenez l'objet avec:

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

22
miksiii

Le moyen le plus simple est:

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

Cela fonctionne pour moi dans Chrome:

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

Sur la base de la réponse précédente, voici une fonction qui permet de parcourir 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 un nombre dans le cas de la propriété length. Vous pouvez utiliser la variable typeofKey pour filtrer uniquement 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.

1
Steve Isenberg