Получить ключи 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)
}

РЕДАКТИРОВАТЬ: этот ответ получает много голосов, поэтому я думаю, что это общий вопрос. Я чувствую, что обязан всем тем, кто может наткнуться на мой ответ и подумать, что это «правильно» только потому, что было принято сделать обновление. Правда в том, что приведенный выше пример не совсем правильный способ сделать это. Самый лучший и безопасный способ сделать это так:

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")

Поскольку key, 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');

Я использовал его, и он работает гладко, не нужно делать цикл for