Holen Sie sich HTML5 localStorage-Schlüssel

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?

In ES2017 können Sie Folgendes verwenden:

Object.entries(localStorage)

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 ) ) );
}

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;
}, {});

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}

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.

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);
})

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!)

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}`);
}

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

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

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;
}

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));
}

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