วนลูปผ่าน localStorage ใน HTML5 และ JavaScript

ดังนั้นฉันคิดว่าฉันสามารถวนลูป localStorage ได้เหมือนวัตถุทั่วไปเพราะมันมีความยาว ฉันจะวนซ้ำสิ่งนี้ได้อย่างไร

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

ถ้าฉันทำlocalStorage.lengthมันจะส่งคืน3ซึ่งถูกต้อง ฉันคิดว่าการfor...inวนซ้ำจะใช้ได้ผล

ฉันกำลังคิดบางอย่างเช่น:

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

แต่ไม่มีประโยชน์ ความคิดใด ๆ ?

ความคิดอื่น ๆ ที่ฉันมีก็คือ

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

ซึ่งในการfor...inทำงาน

คุณสามารถใช้keyวิธี localStorage.key(index)ส่งคืนindexคีย์ th (คำสั่งถูกกำหนดให้ใช้งาน แต่คงที่จนกว่าคุณจะเพิ่มหรือลบคีย์)

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

หากคำสั่งซื้อมีความสำคัญคุณสามารถจัดเก็บอาร์เรย์แบบอนุกรม JSON:

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

ข้อมูลจำเพาะแบบร่างอ้างว่าออบเจ็กต์ใด ๆ ที่รองรับการโคลนที่มีโครงสร้างสามารถเป็นค่าได้ แต่ดูเหมือนจะยังไม่รองรับ

แก้ไข: ในการโหลดอาร์เรย์ให้เพิ่มเข้าไปแล้วจัดเก็บ:

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

วิธีที่ง่ายที่สุดคือ:

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

นอกเหนือจากคำตอบอื่น ๆ ทั้งหมดคุณสามารถใช้ฟังก์ชัน$ .eachจากไลบรารี jQuery:

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

  // key magic
  // value magic

});

ในที่สุดรับวัตถุด้วย:

JSON .parse (localStorage.getItem (localStorage.key (คีย์)));

สิ่งนี้ใช้ได้กับฉันใน Chrome:

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

การสร้างคำตอบก่อนหน้านี้คือฟังก์ชั่นที่จะวนลูปผ่านที่เก็บข้อมูลในเครื่องโดยใช้คีย์โดยไม่ทราบค่าคีย์

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

หากคุณตรวจสอบเอาต์พุตคอนโซลคุณจะเห็นรายการที่เพิ่มโดยโค้ดของคุณทั้งหมดมีสตริง typeof ในขณะที่รายการในตัวเป็นฟังก์ชัน {[โค้ดเนทีฟ]} หรือในกรณีของคุณสมบัติ length a number คุณสามารถใช้ตัวแปร typeofKey เพื่อกรองเฉพาะสตริงเพื่อให้แสดงเฉพาะรายการของคุณ

โปรดทราบว่าสิ่งนี้ใช้ได้แม้ว่าคุณจะเก็บตัวเลขหรือบูลีนไว้เป็นค่าเนื่องจากทั้งสองจะถูกเก็บไว้เป็นสตริง

คำตอบทั้งหมดนี้ไม่สนใจความแตกต่างระหว่างการใช้งาน localStorage ในเบราว์เซอร์ ผู้ร่วมให้ข้อมูลในโดเมนนี้ควรมีคุณสมบัติในการตอบสนองอย่างมากกับแพลตฟอร์มที่พวกเขาอธิบาย การใช้งานทั่วทั้งเบราว์เซอร์หนึ่งรายการได้รับการบันทึกไว้ที่ https://developer.mozilla.org/en/docs/Web/API/Window/localStorageและในขณะที่ทรงพลังมากมีเพียงวิธีการหลักบางอย่างเท่านั้น การวนซ้ำเนื้อหาจำเป็นต้องมีความเข้าใจในการนำไปใช้งานเฉพาะกับเบราว์เซอร์แต่ละตัว

localStorageคือObject.

เราสามารถวนซ้ำได้ด้วยJavaScript for / in Statementเหมือนกับ Object อื่น ๆ

และเราจะใช้.getItem()เพื่อเข้าถึงค่าของแต่ละคีย์ (x)

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