Looping melalui localStorage di HTML5 dan JavaScript

Jadi, saya berpikir saya bisa melakukan loop melalui localStorage seperti objek normal karena memiliki panjang. Bagaimana saya bisa mengulang ini?

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

Jika saya melakukan localStorage.lengthitu kembali 3yang benar. Jadi saya akan berasumsi sebuah for...inloop akan berhasil.

Saya sedang memikirkan sesuatu seperti:

for (x in localStorage){
    console.log(localStorage[x]);
}

Tapi tidak berhasil. Ada ide?

Ide lain yang saya miliki adalah sesuatu seperti

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

Di mana yang for...inberhasil.

Anda bisa menggunakan keymetode ini. localStorage.key(index)mengembalikan indexkunci th (urutannya ditentukan oleh implementasi tetapi tetap sampai Anda menambahkan atau menghapus kunci).

for (var i = 0; i < localStorage.length; i++){
    $('body').append(localStorage.getItem(localStorage.key(i)));
}

Jika urutannya penting, Anda bisa menyimpan array serial JSON:

localStorage.setItem("words", JSON.stringify(["Lorem", "Ipsum", "Dolor"]));

Spesifikasi draf mengklaim bahwa objek apa pun yang mendukung penggandaan terstruktur dapat menjadi sebuah nilai. Tapi ini sepertinya belum didukung.

EDIT: Untuk memuat array, tambahkan ke dalamnya, lalu simpan:

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

Cara yang paling sederhana adalah:

Object.keys(localStorage).forEach(function(key){
   console.log(localStorage.getItem(key));
});

Selain semua jawaban lainnya, Anda dapat menggunakan fungsi $ .each dari pustaka jQuery:

$.each(localStorage, function(key, value){

  // key magic
  // value magic

});

Akhirnya, dapatkan objek dengan:

JSON .parse (localStorage.getItem (localStorage.key (key)));

Ini berfungsi untuk saya di Chrome:

for(var key in localStorage) {
  $('body').append(localStorage.getItem(key));
}

Membangun dari jawaban sebelumnya di sini adalah fungsi yang akan melewati penyimpanan lokal dengan kunci tanpa mengetahui nilai kunci.

function showItemsByKey() {
   var typeofKey = null;
   for (var key in localStorage) {
       typeofKey = (typeof localStorage[key]);
       console.log(key, typeofKey);
   }
}

Jika Anda memeriksa output konsol, Anda akan melihat item yang ditambahkan oleh kode Anda semuanya memiliki tipe string. Sedangkan item bawaan adalah salah satu fungsi {[kode asli]} atau dalam kasus properti panjang berupa angka. Anda dapat menggunakan variabel typeofKey untuk memfilter hanya pada string sehingga hanya item Anda yang ditampilkan.

Perhatikan bahwa ini berfungsi bahkan jika Anda menyimpan angka atau boolean sebagai nilai karena keduanya disimpan sebagai string.

Semua jawaban ini mengabaikan perbedaan antara implementasi localStorage di seluruh browser. Kontributor dalam domain ini harus sangat memenuhi syarat tanggapan mereka dengan platform yang mereka gambarkan. Implementasi satu browser-lebar didokumentasikan di https://developer.mozilla.org/en/docs/Web/API/Window/localStorage dan, meskipun sangat kuat, hanya berisi beberapa metode inti. Perulangan melalui konten membutuhkan pemahaman tentang implementasi khusus untuk masing-masing browser.

localStorageadalah sebuah Object.

Kita dapat mengulanginya dengan JavaScript for / in Statement seperti Objek lainnya.

Dan kita akan gunakan .getItem()untuk mengakses nilai setiap key (x).

for (x in localStorage){
    console.log(localStorage.getItem(x));
}