Uzyskaj klucze lokalnego magazynu HTML5

Zastanawiam się tylko, jak uzyskać wszystkie kluczowe wartości localStorage.

Próbowałem pobrać wartości za pomocą prostej pętli JavaScript

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

Ale działa tylko wtedy, gdy klawisze są numerami progresywnymi, zaczynając od 1.

Jak zdobyć wszystkie klucze, aby wyświetlić wszystkie dostępne dane?

w ES2017 możesz użyć:

Object.entries(localStorage)

for (var key in localStorage){
   console.log(key)
}

EDYCJA: ta odpowiedź jest bardzo pozytywna, więc myślę, że jest to częste pytanie. Czuję, że jestem to winny każdemu, kto mógłby natknąć się na moją odpowiedź i pomyśleć, że jest to „właściwe” tylko dlatego, że zaakceptowano dokonanie aktualizacji. Prawda jest taka, że ​​powyższy przykład nie jest właściwym sposobem, aby to zrobić. Najlepszym i najbezpieczniejszym sposobem jest zrobienie tego w następujący sposób:

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

Lubię w ten sposób tworzyć z tego dobrze widoczny obiekt.

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

Podobnie robię z ciasteczkami.

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

Możesz użyć tej localStorage.key(index)funkcji, aby zwrócić reprezentację ciągu, gdzie indexjest n-ty obiekt, który chcesz pobrać.

Jeśli przeglądarka obsługuje HTML5 LocalStorage, powinna również zaimplementować Array.prototype.map, umożliwiając to:

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

Ponieważ pytanie dotyczyło znalezienia kluczy, pomyślałem, że wspomnę, że aby pokazać każdą parę kluczy i wartości, możesz to zrobić w następujący sposób (na podstawie odpowiedzi Kevina):

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

Spowoduje to zarejestrowanie danych w formacie „klucz: wartość”

(Kevin: jeśli chcesz, możesz po prostu wziąć te informacje do swojej odpowiedzi!)

Spowoduje to wydrukowanie wszystkich kluczy i wartości w localStorage:

ES6:

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

Możesz uzyskać klucze i wartości w ten sposób:

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

Zgadzam się z Kevinem, że ma najlepszą odpowiedź, ale czasami, gdy masz różne klucze w lokalnej pamięci o tych samych wartościach, na przykład chcesz, aby użytkownicy publiczni widzieli, ile razy dodali swoje przedmioty do swoich koszyków, musisz im pokazać ile razy możesz użyć tego:

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

Dla tych, którzy wspominają o używaniu Object.keys(localStorage)... nie, ponieważ nie będzie działać w Firefoksie (jak na ironię, ponieważ Firefox jest wierny specyfikacji). Rozważ to:

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

Ponieważ key, getItem i setItem to metody prototypowe, Object.keys(localStorage)zwrócą tylko wartość ["key2"].

Najlepiej zrobić coś takiego:

let t = [];
for (let i = 0; i < localStorage.length; i++) {
  t.push(localStorage.key(i));
}

Możemy też czytać po imieniu.

Powiedzmy, że zapisaliśmy wartość pod nazwą „użytkownik” w ten sposób

localStorage.setItem('user', user_Detail);

Następnie możemy go przeczytać za pomocą

localStorage.getItem('user');

Użyłem go i działa płynnie, nie ma potrzeby wykonywania pętli for