it-swarm.com.de

Durchlaufen Sie localStorage in HTML5 und JavaScript

Ich dachte also, ich könnte localStorage 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 einen localStorage.length mache, wird 3 zurückgegeben, der korrekt ist. Ich würde also davon ausgehen, dass eine for...in-Schleife funktionieren würde.

Ich dachte so etwas wie:

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

Aber ohne Erfolg. Irgendwelche Ideen?

Die andere Idee, die ich hatte, war so ähnlich

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

In dem der for...in funktioniert.

72
Oscar Godson

Sie können die Methode key verwenden. localStorage.key(index) gibt den Schlüssel indexth 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"]));

Die Entwurfsspezifikation behauptet, dass jedes Objekt, das strukturierte Klone unterstützt einen Wert haben kann. Dies scheint jedoch noch nicht unterstützt zu werden.

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

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

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 das Objekt schließlich mit:

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

22
miksiii

Der einfachste Weg ist:

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

Das funktioniert für mich in Chrome:

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

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 einen Typ von Zeichenfolge haben. Die eingebauten Elemente sind dagegen Funktionen {[native code]} oder im Fall der length-Eigenschaft eine Zahl. 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 funktioniert, wenn Sie eine Zahl oder einen booleschen Wert als Wert speichern, da beide als Zeichenfolgen gespeichert werden.

1
Steve Isenberg

Alle diese Antworten ignorieren die Unterschiede zwischen den Implementierungen von localStorage zwischen Browsern . Mitwirkende in dieser Domäne sollten ihre Antworten auf die von ihnen beschriebenen Plattformen stark einschränken . Eine browserweite Implementierung ist unter dokumentiert. https://developer.mozilla.org/de/docs/Web/API/Window/localStorage und enthält, obwohl sehr mächtig, nur wenige Kernmethoden. Das Durchlaufen der Inhalte erfordert ein Verständnis der für die einzelnen Browser spezifischen Implementierung.

0
StarTraX