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

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

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

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

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

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

В дополнение ко всем другим ответам вы можете использовать функцию $ .each из библиотеки jQuery:

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

  // key magic
  // value magic

});

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

JSON .parse (localStorage.getItem (localStorage.key (ключ)));

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

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

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

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

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

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

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

localStorageэто Object.

Мы можем пройти через него с помощью JavaScript for / in Statement, как и любой другой Object.

И мы будем использовать .getItem()для доступа к значению каждого ключа (x).

for (x in localStorage){
    console.log(localStorage.getItem(x));
}