web-dev-qa-db-de.com

Holen Sie sich HTML5 localStorage-Schlüssel

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

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 fortlaufende Nummern sind, beginnend mit 1.

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

javascripthtml5keylocal-storage
132
Simone

in ES2017 können Sie Folgendes verwenden:

Object.entries(localStorage)
4
nktshn
for (var key in localStorage){
   console.log(key)
}

BEARBEITEN: Diese Antwort erhält eine Menge positive Stimmen. Ich denke, es ist eine häufige Frage. Ich habe das Gefühl, ich schulde es jedem, der über meine Antwort stolpert und der Meinung ist, 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 ) ) );
}
276
Kevin Ennis

Ich mag es, daraus ein gut sichtbares Objekt zu machen.

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;
}, {});
26
Zack Argyle
function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        alert(localStorage.getItem(key));
    }  
}
12
nerdcoder

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

8
Jeffrey Sweeney

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

Array.apply(0, new Array(localStorage.length)).map(function (o, i) {
    return localStorage.key(i);
})
7
cillay

Da die Frage das Finden der Schlüssel erwähnte, dachte ich, ich würde erwähnen, dass Sie, um jedes Schlüssel- und Wertepaar anzuzeigen, dies folgendermaßen tun könnten (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 "Schlüssel: Wert" protokolliert.

(Kevin: Zögern Sie nicht, diese Informationen in Ihre Antwort einzutragen, wenn Sie möchten!)

4
Sean Colombo

Ich stimme Kevin zu, er hat die beste Antwort, aber manchmal, wenn Sie verschiedene Schlüssel in Ihrem lokalen Speicher mit denselben Werten haben, möchten Sie, dass Ihre öffentlichen Benutzer sehen, wie oft sie ihre Artikel in ihre Körbe gelegt haben, um ihnen die zu zeigen wie oft auch, dann können Sie dies 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;
}
0
Hassan Azimi

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