Цикл через localStorage в HTML5 и JavaScript

Question

Итак, я подумал, что мог бы просто перебрать 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 работает.

Answer 1

Вы можете использовать метод key. localStorage.key(index) возвращает ключ index (порядок определяется реализацией, но постоянен до тех пор, пока вы не добавите или не удалите ключи).

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

Answer 2

В дополнение ко всем остальным ответам, вы можете использовать $. Каждый функция из библиотеки jQuery:

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

  // key magic
  // value magic

});

В конце концов, получить объект с:

JSON .parse (localStorage.getItem (localStorage.key (key)));

Answer 3

Самый простой способ:

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

Answer 4

Это работает для меня в Chrome:

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

Answer 5

Все эти ответы игнорируют различия между реализациями localStorage в разных браузерах.Участники этого домена должны тщательно квалифицировать свои ответы на платформах, которые они описывают.Одна реализация для всего браузера задокументирована как https://developer.mozilla.org/en/docs/Web/API/Window/localStorage и, хотя она очень мощная, содержит только несколько основных методов.Для просмотра содержимого требуется понимание реализации, специфичной для отдельных браузеров.

Answer 6

Опираясь на предыдущий ответ, здесь есть функция, которая перебирает локальное хранилище по ключу, не зная значений ключа.

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

Если вы изучите вывод консоли, то увидите, что все элементы, добавленные вашим кодом, имеют строку typeof. Принимая во внимание, что встроенные элементы являются либо функциями {[native code]}, либо, в случае свойства length, числом. Вы можете использовать переменную typeofKey для фильтрации только по строкам, чтобы отображались только ваши элементы.

Обратите внимание, что это работает, даже если вы храните число или логическое значение в качестве значения, поскольку они оба хранятся в виде строк.