Przechodzenie przez localStorage w HTML5 i JavaScript

Więc pomyślałem, że mógłbym po prostu zapętlić localStorage jak normalny obiekt, ponieważ ma długość. Jak mogę przez to przejść?

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

Jeśli zrobię localStorage.length, zwraca, 3co jest poprawne. Więc zakładam, że for...inpętla zadziała.

Myślałem o czymś takim:

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

Ale bezskutecznie. Jakieś pomysły?

Inny pomysł, jaki miałem, był taki

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

W którym for...indziała.

Możesz użyć keymetody. localStorage.key(index)zwraca indexth klucz (kolejność jest zdefiniowana w ramach implementacji, ale stała do momentu dodania lub usunięcia kluczy).

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

Jeśli kolejność ma znaczenie, możesz przechowywać tablicę zserializowaną JSON:

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

Wersja robocza specyfikacji twierdzi, że każdy obiekt obsługujący klon strukturalny może być wartością. Ale to nie wydaje się być jeszcze obsługiwane.

EDYCJA: Aby załadować tablicę, dodaj do niej, a następnie zapisz:

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

Najprostszy sposób to:

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

Oprócz wszystkich innych odpowiedzi możesz użyć funkcji $ .each z biblioteki jQuery:

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

  // key magic
  // value magic

});

Ostatecznie zdobądź obiekt z:

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

To działa dla mnie w Chrome:

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

Opierając się na poprzedniej odpowiedzi, jest to funkcja, która będzie przechodzić przez lokalną pamięć według klucza bez znajomości wartości kluczy.

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

Jeśli przeanalizujesz dane wyjściowe konsoli, zobaczysz, że elementy dodane przez twój kod mają typ string. Natomiast elementy wbudowane są albo funkcjami {[kod natywny]}, albo w przypadku właściwości length liczbą. Możesz użyć zmiennej typeofKey, aby odfiltrować tylko ciągi znaków, aby wyświetlane były tylko elementy.

Zauważ, że działa to nawet jeśli przechowujesz liczbę lub wartość logiczną jako wartość, ponieważ oba są przechowywane jako ciągi.

Wszystkie te odpowiedzi ignorują różnice między implementacjami localStorage w różnych przeglądarkach. Współautorzy w tej domenie powinni ściśle kwalifikować swoje odpowiedzi do opisywanych przez siebie platform. Jedna implementacja dla całej przeglądarki jest udokumentowana na https://developer.mozilla.org/en/docs/Web/API/Window/localStorage i chociaż jest bardzo potężna, zawiera tylko kilka podstawowych metod. Przeglądanie zawartości wymaga zrozumienia implementacji specyficznej dla poszczególnych przeglądarek.

localStoragejest Object.

Możemy ją przejrzeć w pętli za pomocą instrukcji JavaScript for / in, tak jak każdy inny obiekt.

I użyjemy, .getItem()aby uzyskać dostęp do wartości każdego klucza (x).

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