HTML5 localStorage anahtarlarını alın

Sadece tüm önemli değerleri nasıl alacağımı merak ediyorum localStorage.

Basit bir JavaScript döngüsü ile değerleri almaya çalıştım

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

Ancak, yalnızca tuşlar 1'den başlayarak aşamalı sayılarsa çalışır.

Mevcut tüm verileri görüntülemek için tüm tuşları nasıl alabilirim?

ES2017'de şunları kullanabilirsiniz:

Object.entries(localStorage)

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

EDIT: bu cevap çok upvotes alıyor, bu yüzden sanırım bu yaygın bir soru. Cevabımı tökezleyebilecek herkese borçlu gibi hissediyorum ve bunun bir güncelleme yapmayı kabul ettiği için "doğru" olduğunu düşünüyormuşum gibi hissediyorum. Gerçek şu ki, yukarıdaki örnek bunu yapmanın doğru yolu değildir . En iyi ve en güvenli yol bunu yapmaktır:

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

Bunun gibi kolayca görülebilen bir nesne oluşturmayı seviyorum.

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

Çerezlerle de benzer bir şey yapıyorum.

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

Bu localStorage.key(index)işlevi, indexalmak istediğiniz n'inci nesnenin bulunduğu dize temsilini döndürmek için kullanabilirsiniz .

Tarayıcı HTML5 LocalStorage'ı destekliyorsa, bunu etkinleştirerek Array.prototype.map uygulamasını da uygulamalıdır:

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

Anahtarları bulduğum sorudan beri, her anahtar ve değer çiftini göstermek için bahsettiğimi düşündüm, (Kevin'in cevabına göre) şöyle yapabilirsin:

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

Bu, verileri "key: value" biçiminde günlüğe kaydeder

(Kevin: İsterseniz bu bilgiyi cevabınıza almaktan çekinmeyin!)

Bu, localStorage'daki tüm anahtarları ve değerleri yazdırır:

ES6:

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

Bunun gibi anahtarlar ve değerler alabilirsiniz:

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

Kevin'e en iyi cevabı verdiğini kabul ediyorum, ancak bazen yerel depolamanızda aynı değerlere sahip farklı anahtarlarınız olduğunda, örneğin genel kullanıcılarınızın öğelerini sepetlerine kaç kez eklediklerini görmelerini istersiniz. o zaman bunu kullanmanız gerekir:

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

Object.keys(localStorage)Firefox'ta kullanamayacağından bahsetmiş olanlar için ... çünkü ironik olarak (Firefox spesifikasyonlara sadık olduğu için) Bunu düşün:

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

Çünkü key, getItem ve setItem prototypal yöntemleri Object.keys(localStorage)sadece döner ["key2"].

Böyle bir şey yapmak en iyisidir:

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

Ayrıca adıyla da okuyabiliriz.

Diyelim ki değeri 'user' adında böyle kaydettik

localStorage.setItem('user', user_Detail);

Sonra kullanarak okuyabiliriz

localStorage.getItem('user');

Ben kullandım ve düzgün çalışıyor, for döngüsünü yapmaya gerek yok