Получить ключи HTML5 localStorage

мне просто интересно, как получить все значения ключей в localStorage.


Я попытался получить значения с помощью простого цикла JavaScript

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

но он работает только в том случае, если ключи являются прогрессивными числами, начиная с 1.


Как мне получить все ключи, чтобы отобразить все доступные данные?

9 ответов


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

EDIT: этот ответ получает много 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
}, {});

Я делаю аналогичную вещь с cookies, а также.

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) для возврата строкового представления.


если браузер поддерживает HTML5 LocalStorage, он также должен реализовать Array.прототип.карта, включающая это:

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

это будет регистрировать данные в формате "ключ: значение"

(Кевин: не стесняйтесь просто взять эту информацию в свой ответ, если хотите!)


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

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

мы также можем читать по имени.

скажем, мы сохранили значение с именем "пользователь", как это

$localStorage.user = user_Detail;

затем мы можем прочитать его с помощью

localStorage["ngStorage-user"];

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


для тех, кто упоминает использование 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));
}