Durchlaufen von localStorage in HTML5 und JavaScript

Also dachte ich, ich könnte localStorage einfach wie ein normales Objekt durchlaufen, da es eine Länge hat. Wie kann ich das durchlaufen?

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

Wenn ich ein mache localStorage.length, kehrt es zurück, 3was korrekt ist. Ich würde also annehmen, dass eine for...inSchleife funktionieren würde.

Ich dachte so etwas wie:

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

Aber ohne Erfolg. Irgendwelche Ideen?

Die andere Idee, die ich hatte, war so etwas wie

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

In dem for...infunktioniert das.

Sie können die keyMethode verwenden. localStorage.key(index)Gibt den indexth-Schlüssel zurück (die Reihenfolge ist implementierungsdefiniert, aber konstant, bis Sie Schlüssel hinzufügen oder entfernen).

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

Wenn die Reihenfolge wichtig ist, können Sie ein JSON-serialisiertes Array speichern:

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

Der Entwurf der Spezifikation besagt, dass jedes Objekt, das strukturierten Klon unterstützt , ein Wert sein kann. Dies scheint jedoch noch nicht unterstützt zu werden.

BEARBEITEN: Um das Array zu laden, fügen Sie es hinzu und speichern Sie:

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

Der einfachste Weg ist:

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

Zusätzlich zu allen anderen Antworten können Sie die Funktion $ .each aus der jQuery-Bibliothek verwenden:

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

  // key magic
  // value magic

});

Holen Sie sich schließlich das Objekt mit:

JSON .parse (localStorage.getItem (localStorage.key (Schlüssel)));

Das funktioniert bei mir in Chrome:

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

Aufbauend auf der vorherigen Antwort ist hier eine Funktion, die den lokalen Speicher nach Schlüssel durchläuft, ohne die Schlüsselwerte zu kennen.

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

Wenn Sie die Konsolenausgabe untersuchen, sehen Sie, dass die von Ihrem Code hinzugefügten Elemente alle eine Zeichenfolge haben. Während die eingebauten Elemente entweder Funktionen {[nativer Code]} oder im Fall der Längeneigenschaft eine Zahl sind. Sie können die Variable typeofKey verwenden, um nur nach den Zeichenfolgen zu filtern, sodass nur Ihre Elemente angezeigt werden.

Beachten Sie, dass dies auch dann funktioniert, wenn Sie eine Zahl oder einen Booleschen Wert als Wert speichern, da beide als Zeichenfolgen gespeichert sind.

Alle diese Antworten ignorieren die Unterschiede zwischen den Implementierungen von localStorage in verschiedenen Browsern. Mitwirkende in diesem Bereich sollten ihre Antworten mit den von ihnen beschriebenen Plattformen stark qualifizieren. Eine browserweite Implementierung ist unter https://developer.mozilla.org/en/docs/Web/API/Window/localStorage dokumentiert und enthält, obwohl sie sehr leistungsfähig ist, nur einige Kernmethoden. Das Durchlaufen der Inhalte erfordert ein Verständnis der Implementierung, die für einzelne Browser spezifisch ist.

localStorageist ein Object.

Wir können es mit JavaScript for / in Statement wie jedes andere Objekt durchlaufen .

Und wir werden verwenden, .getItem()um auf den Wert jedes Schlüssels (x) zuzugreifen.

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