Dapatkan HTML5 kunci Penyimpanan lokal

Saya hanya ingin tahu bagaimana cara memasukkan semua nilai kunci localStorage.

Saya telah mencoba mengambil nilai-nilai dengan loop JavaScript sederhana

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

Tapi itu hanya berfungsi jika kunci adalah angka progresif, mulai dari 1.

Bagaimana cara mendapatkan semua kunci, untuk menampilkan semua data yang tersedia?

di ES2017 Anda dapat menggunakan:

Object.entries(localStorage)

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

EDIT: jawaban ini mendapatkan banyak upvotes, jadi saya kira itu adalah pertanyaan umum. Saya merasa seperti berhutang kepada siapa pun yang mungkin tersandung pada jawaban saya dan berpikir itu "benar" hanya karena diterima untuk membuat pembaruan. Sebenarnya, contoh di atas sebenarnya bukan cara yang tepat untuk melakukan ini. Cara terbaik dan teraman adalah melakukannya seperti ini:

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

Saya suka membuat objek yang mudah terlihat keluar seperti ini.

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

Saya melakukan hal yang sama dengan cookie juga.

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

Anda dapat menggunakan localStorage.key(index)fungsi untuk mengembalikan representasi string, di mana indexobjek ke-n yang ingin Anda ambil.

Jika browser mendukung HTML5 LocalStorage, browser juga harus mengimplementasikan Array.prototype.map, mengaktifkan ini:

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

Karena pertanyaan menyebutkan menemukan kunci, saya pikir saya akan menyebutkan bahwa untuk menunjukkan setiap pasangan kunci dan nilai, Anda bisa melakukannya seperti ini (berdasarkan jawaban Kevin):

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

Ini akan mencatat data dalam format "key: value"

(Kevin: jangan ragu untuk hanya mengambil info ini ke dalam jawaban Anda jika Anda mau!)

Ini akan mencetak semua kunci dan nilai pada Penyimpanan lokal:

ES6:

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

Anda bisa mendapatkan kunci dan nilai seperti ini:

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

Saya setuju dengan Kevin ia memiliki jawaban terbaik tetapi kadang-kadang ketika Anda memiliki kunci berbeda di penyimpanan lokal Anda dengan nilai yang sama misalnya Anda ingin pengguna publik Anda melihat berapa kali mereka telah menambahkan barang-barang mereka ke keranjang mereka, Anda perlu menunjukkan kepada mereka beberapa kali juga maka Anda dapat menggunakan ini:

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

Bagi mereka yang menyebutkan menggunakan Object.keys(localStorage)... jangan karena itu tidak akan bekerja di Firefox (ironisnya karena Firefox setia dengan spesifikasi). Pertimbangkan ini:

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

Karena key, getItem dan setItem adalah metode prototypal Object.keys(localStorage)hanya akan kembali ["key2"].

Anda sebaiknya melakukan sesuatu seperti ini:

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

Kita juga bisa membaca namanya.

Katakanlah kita telah menyimpan nilai dengan nama 'pengguna' seperti ini

localStorage.setItem('user', user_Detail);

Lalu kita bisa membacanya dengan menggunakan

localStorage.getItem('user');

Saya menggunakannya dan berfungsi dengan baik, tidak perlu melakukan for loop