Отримайте локальні ключі зберігання HTML5

Мені просто цікаво, як отримати всі ключові значення 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)
}

EDIT: ця відповідь отримує багато відгуків, тому я думаю, що це поширене питання. Я відчуваю, що завдячую тому, хто може спіткнутися на мою відповідь і вважає, що це "правильно" лише тому, що було прийнято робити оновлення. Правда, наведений вище приклад насправді не є правильним способом зробити це. Найкращий і безпечний спосіб - це зробити так:

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

Оскільки в запитанні було вказано пошук ключів, я подумав, що хочу зазначити, що для показу кожної пари ключів і значень можна зробити це так (на основі відповіді Кевіна):

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

При цьому будуть записані дані у форматі "ключ: значення"

(Кевін: сміливо введіть цю інформацію у свою відповідь, якщо хочете!)

Це надрукує всі ключі та значення на 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}`);
}

Я згоден з Кевіном, він має найкращу відповідь, але іноді, коли у вашому локальному сховищі є різні ключі з однаковими значеннями, наприклад, ви хочете, щоб ваші загальнодоступні користувачі бачили, скільки разів вони додавали свої предмети у свої кошики, вам потрібно показати їм кількість разів, то ви можете використовувати це:

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

Ми також можемо читати по імені.

Скажімо, ми зберегли значення з таким ім'ям "user"

localStorage.setItem('user', user_Detail);

Тоді ми можемо прочитати це за допомогою

localStorage.getItem('user');

Я використовував це, і він працює гладко, не потрібно робити цикл