Holen Sie sich HTML5 localStorage-Schlüssel

145

Ich frage mich nur, wie ich alle Schlüsselwerte erreichen kann localStorage.


Ich habe versucht, die Werte mit einer einfachen JavaScript-Schleife abzurufen

for (var i=1; i <= localStorage.length; i++)  {
   alert(localStorage.getItem(i))
}

Dies funktioniert jedoch nur, wenn die Tasten progressive Zahlen sind, beginnend bei 1.


Wie bekomme ich alle Schlüssel, um alle verfügbaren Daten anzuzeigen?

Simone
quelle
Mögliches Duplikat von stackoverflow.com/questions/3138564/…
kubetz
Warum beginnt diese Schleife mit i = 1 und endet mit i = localStorage.length? In den von mir getesteten Browsern (Chrome) sollte die Schleife bei 0 beginnen und bei localStorage.length enden - 1 ...
Louis LC
@ LouisLC, weil ich für meine Schlüssel progressive Zahlen verwendet habe (wie ein Primärschlüssel in einer relationalen Datenbank).
Simone

Antworten:

35

In ES2017 können Sie Folgendes verwenden:

Object.entries(localStorage)
nktshn
quelle
5
und ich nehme an, Object.keys()funktioniert auch wie erwartet?
292
for (var key in localStorage){
   console.log(key)
}

EDIT: Diese Antwort bekommt viele positive Stimmen, also denke ich, dass es eine häufige Frage ist. Ich habe das Gefühl, ich schulde es jedem, der über meine Antwort stolpern und denken könnte, dass es "richtig" ist, nur weil es akzeptiert wurde, ein Update vorzunehmen. Die Wahrheit ist, dass das obige Beispiel nicht wirklich der richtige Weg ist, dies zu tun. Der beste und sicherste Weg ist, es so zu machen:

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.getItem( localStorage.key( i ) ) );
}
Kevin Ennis
quelle
In diesem Link .... stackoverflow.com/questions/15313606/… ... warum verwenden sie all diese seltsamen Methoden, um auf localStorage zuzugreifen?
2
Mehrere Fragen zum "besten / sichersten" Code: 1) Warum deklarieren localStorage.lengthund nicht direkt verwenden? 2) Warum in der for-Schleife deklarieren? 3) Warum ++iwird bevorzugt i++?
Luciano Bargmann
8
Hast du es tatsächlich versucht? ++iAuf keinen Fall beginnt die Schleife bei i = 1. Der dritte Ausdruck in der Klammer wird nach jeder Iteration ausgewertet . i++und ++ibeide haben genau den gleichen Effekt auf i. Der Unterschied besteht darin , dass ++iauswertet auf den neuen Wert des inach dem Inkrementieren, während i++auswertet auf den Wert i vor der Inkrementierung. Hier macht es absolut keinen Unterschied, denn alles, was uns wichtig ist, ist der Nebeneffekt des Inkrementierens i, nicht der Wert des Ausdrucks.
Kevin Ennis
33
Es ist erwähnenswert, dass heutzutage Object.keys(localStorage)perfekt für dieses Szenario funktioniert, solange Sie IE <9 nicht unterstützen müssen.
Adrian
2
Beachten Sie auch, dass Sie dies mit dem localStorage.key( i )Teil tun können, wenn Sie den Namen des Schlüssels selbst anzeigen möchten .
Sean Colombo
29

Ich mag es, daraus ein leicht sichtbares Objekt zu erstellen.

Object.keys(localStorage).reduce(function(obj, str) { 
    obj[str] = localStorage.getItem(str); 
    return obj
}, {});

Ähnliches mache ich auch mit Cookies.

document.cookie.split(';').reduce(function(obj, str){ 
    var s = str.split('='); 
    obj[s[0].trim()] = s[1];
    return obj;
}, {});
Zack Argyle
quelle
1
Ich mag diesen Stil, über Objekte zu iterieren.
Jonathan Stellwag
12
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
Nerdcoder
quelle
9

Mit der localStorage.key(index)Funktion können Sie die Zeichenfolgendarstellung zurückgeben, wobei indexsich das n-te Objekt befindet, das Sie abrufen möchten.

Jeffrey Sweeney
quelle
7

Wenn der Browser HTML5 LocalStorage unterstützt, sollte er auch Array.prototype.map implementieren und Folgendes aktivieren:

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})
cillay
quelle
Sie können auch etwas tun, new Array(this.localStorage.length).fill(0)das sich etwas weniger hackig anfühlt als Apply Imo.
Lenny
6

Da in der Frage das Finden der Schlüssel erwähnt wurde, dachte ich, ich würde erwähnen, dass Sie dies tun können, um jedes Schlüssel- und Wertepaar anzuzeigen (basierend auf Kevins Antwort):

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  console.log( localStorage.key( i ) + ": " + localStorage.getItem( localStorage.key( i ) ) );
}

Dadurch werden die Daten im Format "key: value" protokolliert.

(Kevin: Fühlen Sie sich frei, diese Informationen in Ihre Antwort aufzunehmen, wenn Sie möchten!)

Sean Colombo
quelle
1

Dadurch werden alle Schlüssel und Werte in localStorage gedruckt:

ES6:

for (let i=0; i< localStorage.length; i++) {
    let key = localStorage.key(i);
    let value = localStorage[key];
    console.log(`localStorage ${key}:  ${value}`);
}
Rahim Naik
quelle
1

Sie können Schlüssel und Werte wie folgt erhalten:

for (let [key, value] of Object.entries(localStorage)) {
  console.log(`${key}: ${value}`);
}
Bewunderer
quelle
0

Ich stimme Kevin zu, er hat die beste Antwort, aber manchmal, wenn Sie unterschiedliche Schlüssel in Ihrem lokalen Speicher mit denselben Werten haben, möchten Sie beispielsweise, dass Ihre öffentlichen Benutzer sehen, wie oft sie ihre Artikel in ihre Körbe gelegt haben, müssen Sie ihnen die zeigen Wie oft können Sie dies auch verwenden:

var set = localStorage.setItem('key', 'value');
var element = document.getElementById('tagId');

for ( var i = 0, len = localStorage.length; i < len; ++i ) {
  element.innerHTML =  localStorage.getItem(localStorage.key(i)) + localStorage.key(i).length;
}
Hassan Azimi
quelle
-1

Für diejenigen, die die Verwendung von Object.keys(localStorage)... erwähnen, nicht, weil es in Firefox nicht funktioniert (ironischerweise, weil Firefox der Spezifikation treu bleibt). Bedenken Sie:

localStorage.setItem("key", "value1")
localStorage.setItem("key2", "value2")
localStorage.setItem("getItem", "value3")
localStorage.setItem("setItem", "value4")

Da key, getItem und setItem prototypische Methoden sind, Object.keys(localStorage)werden sie nur zurückgegeben ["key2"].

Am besten machst du so etwas:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}
Mike Ratcliffe
quelle
@Darkrum Da Firefox der Spezifikation korrekt folgt, würden key, getItem und setItem fehlen, wenn Sie object.keys()... Ich werde meine Antwort aktualisieren, um dies widerzuspiegeln.
Mike Ratcliffe
Lesen Sie einfach die Spezifikation für die lokale Speicherung und ich sehe nicht, was Sie erwähnt haben.
Darkrum
Und lesen Sie die Spezifikation für object.keys (). Firefox sieht so aus, als würde es nicht fallen, wenn das, was Sie sagen, wahr ist.
Darkrum
@Darkrum Blick auf html.spec.whatwg.org/multipage/... und Sie können sehen , dass die Spezifikation mit der IDL definiert [Exposed=Window]. Dies führt zu dem von mir beschriebenen Verhalten. Wenn es mit angegeben [Exposed=Window,OverrideBuiltins]würde, würde dies das erwartete Verhalten ergeben, aber die Spezifikation gibt es nicht an OverrideBuiltins. Sie können eine Diskussion darüber in whatwg / html hier sehen: github.com/whatwg/html/issues/183
Mike Ratcliffe
Wie ich noch sagen werde, hat dies nichts damit zu tun, wie object.keys funktioniert. Mozillas Entscheidung, sie nicht festlegen zu lassen, ist die Art und Weise, wie sie die Spezifikation interpretierten. Offensichtlich wusste Google, was es tat, denn was hat ein Prototyp, der nur geändert werden kann, wenn dies ausdrücklich auf andere Weise erfolgt, etwas mit eigenen Eigenschaften zu tun?
Darkrum
-3

Wir können auch unter dem Namen lesen.

Angenommen, wir haben den Wert mit dem Namen 'Benutzer' wie folgt gespeichert

localStorage.setItem('user', user_Detail);

Dann können wir es mit lesen

localStorage.getItem('user');

Ich habe es benutzt und es funktioniert reibungslos, die for-Schleife muss nicht ausgeführt werden

Ali Adravi
quelle