รับคีย์ HTML5 localStorage

ฉันแค่สงสัยว่าจะรับค่าคีย์ทั้งหมดได้localStorageอย่างไร

ฉันพยายามดึงค่าด้วยการวนซ้ำ JavaScript อย่างง่าย

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

แต่ใช้งานได้เฉพาะเมื่อคีย์เป็นตัวเลขโปรเกรสซีฟเริ่มต้นที่ 1

ฉันจะรับกุญแจทั้งหมดได้อย่างไรเพื่อแสดงข้อมูลที่มีทั้งหมด

ใน ES2017 คุณสามารถใช้:

Object.entries(localStorage)

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

แก้ไข: คำตอบนี้ได้รับ upvotes มากมายดังนั้นฉันเดาว่ามันเป็นคำถามทั่วไป ฉันรู้สึกเหมือนฉันเป็นหนี้กับทุกคนที่อาจสะดุดกับคำตอบของฉันและคิดว่ามัน "ถูกต้อง" เพียงเพราะได้รับการยอมรับให้ทำการอัปเดต ความจริงคือตัวอย่างข้างต้นไม่ใช่วิธีที่ถูกต้องในการทำสิ่งนี้ วิธีที่ดีที่สุดและปลอดภัยที่สุดคือทำอย่างนี้:

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

ฉันชอบที่จะสร้างวัตถุที่มองเห็นได้ง่ายจากสิ่งนี้

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

ฉันทำสิ่งที่คล้ายกับคุกกี้เช่นกัน

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

คุณสามารถใช้localStorage.key(index)ฟังก์ชั่นเพื่อคืนค่าการแทนสตริงซึ่งindexเป็นวัตถุที่ n ที่คุณต้องการดึงข้อมูล

หากเบราว์เซอร์รองรับ HTML5 LocalStorage ก็ควรใช้ Array.prototype.map ด้วยเช่นกัน:

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

เนื่องจากคำถามที่กล่าวถึงการค้นหากุญแจฉันคิดว่าฉันจะพูดถึงการแสดงคู่คีย์และค่าทุกคู่คุณสามารถทำสิ่งนี้ได้ (ตามคำตอบของ Kevin):

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

สิ่งนี้จะบันทึกข้อมูลในรูปแบบ "key: value"

(Kevin: อย่าลังเลที่จะนำข้อมูลนี้ไปใช้ในคำตอบของคุณหากคุณต้องการ!)

นี่จะพิมพ์คีย์และค่าทั้งหมดบน localStorage:

ES6:

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

คุณสามารถรับกุญแจและค่าเช่นนี้:

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

ฉันเห็นด้วยกับ Kevin เขามีคำตอบที่ดีที่สุด แต่บางครั้งเมื่อคุณมีคีย์ที่แตกต่างกันในที่จัดเก็บในท้องที่ของคุณด้วยค่าเดียวกันเช่นคุณต้องการให้ผู้ใช้สาธารณะของคุณเห็นจำนวนครั้งที่พวกเขาได้เพิ่มรายการลงในตะกร้าของคุณ จำนวนครั้งเช่นกันคุณสามารถใช้สิ่งนี้:

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 (แดกดันเพราะ Firefox ซื่อสัตย์ต่อสเป็ค) พิจารณาสิ่งนี้:

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

เนื่องจากคีย์ getItem และ setItem เป็นวิธีการสร้างต้นแบบObject.keys(localStorage)จะส่งคืนเท่านั้น["key2"]จะกลับมา

คุณดีที่สุดที่จะทำสิ่งนี้:

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

นอกจากนี้เรายังสามารถอ่านชื่อ

สมมติว่าเราได้บันทึกค่าด้วยชื่อ 'ผู้ใช้' เช่นนี้

localStorage.setItem('user', user_Detail);

จากนั้นเราสามารถอ่านได้โดยใช้

localStorage.getItem('user');

ฉันใช้มันและมันทำงานได้อย่างราบรื่นไม่จำเป็นต้องทำเพื่อลูป