Wie kann ich eine Liste der im lokalen Speicher von HTML 5 gespeicherten Elemente von Javascript abrufen?

Lesezeit: 2 Minuten

Benutzer-Avatar
Kyle

Wie kann ich eine Liste der im lokalen Speicher von HTML 5 gespeicherten Elemente von Javascript abrufen?

Benutzer-Avatar
KJYe.Name

Aus HTML5-Referenz:

Wie andere JavaScript-Objekte können Sie das localStorage-Objekt als assoziatives Array behandeln. Anstatt die Methoden getItem() und setItem() zu verwenden, können Sie einfach eckige Klammern verwenden.

localStorage.setItem('test', 'testing 1');
localStorage.setItem('test2', 'testing 2');
localStorage.setItem('test3', 'testing 3');

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

//test for firefox 3.6 see if it works
//with this way of iterating it
for(var i=0, len=localStorage.length; i<len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    console.log(key + " => " + value);
}

Dies wird ausgeben:

testing 3
testing 2
testing 1

test3 => testing 3
test2 => testing 2
test => testing 1

Hier ist der JSFiddle-Demo

  • Hat bei mir in Chrome funktioniert, aber Firefox 3.6 hat den Fehler “TypeError: null has invalid Iterator Wert null”

    – Kyle

    23. März 2011 um 19:58 Uhr

  • @Kyle es funktioniert großartig in Firefox 4. es kam gestern heraus, lass mich nach 3.6 suchen

    – KJYe.Name

    23. März 2011 um 19:59 Uhr

  • @Kyle Obwohl Firefox localStorage unterstützt, kann es deaktiviert werden. Überprüfen Sie, ob es eingeschaltet ist. Gehen Sie zu about:config und prüfen Sie, ob dom.storage.enabled auf true gesetzt ist.

    – KJYe.Name

    23. März 2011 um 20:10 Uhr

  • ja es ist aktiviert. Und dabei console.debug(localStorage)kann ich die Testvariablen darin sehen.

    – Kyle

    23. März 2011 um 20:14 Uhr

  • @Kyle können Sie die jsfiddle-Demo ausführen und sehen, ob Sie denselben Fehler erhalten?

    – KJYe.Name

    23. März 2011 um 20:22 Uhr

localStorage ist ein Verweis auf das Objekt window.Storage, sodass Sie es wie jedes andere Objekt verwenden können:

Holen Sie sich eine Reihe von Artikeln

Object.keys(localStorage)

Länge bekommen

Object.keys(localStorage).length

Mit jquery iterieren

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

  • jQuery?! Gesichtspalme. Object.keys(localStorage).forEach(key => console.log(localStorage[key]));

    – c24w

    9. August 2016 um 16:12 Uhr

  • Gibt es eine Möglichkeit, Einträge für alle Domains zu erhalten, anstatt den Eintrag im aktuellen Tab?

    – Min

    8. Oktober 2016 um 14:37 Uhr

Sie können verwenden Object.assign():

var data = Object.assign({}, localStorage)

  • Tolle Lösung mit viel weniger Cruft

    – maxhuty

    5. Juli 2019 um 20:41 Uhr


Da localStorage ein Schlüsselwert mit Zeichenfolgen ist, serialisieren Sie es einfach mit JSON und deserialisieren Sie es, wenn Sie es abrufen möchten.

 localStorage.setItem("bar", JSON.stringify([1,2,3]));
 var foo = localStorage.getItem("bar");
 JSON.parse(foo);
 // returns [1,2,3]

Wie wäre es mit:

Object.keys(localStorage).map(k => localStorage.getItem(k))

Benutzer-Avatar
Lukas D

Du kannst den … benutzen localStorage als einfaches Objekt, aber es wird nicht empfohlen.

Hier ist eine sicherere Lösung:

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log({key, value})
}

1257190cookie-checkWie kann ich eine Liste der im lokalen Speicher von HTML 5 gespeicherten Elemente von Javascript abrufen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy