Цитирование через 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 работает.

Ответ 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"]));

В проекте spec утверждается, что любой объект, поддерживающий структурированный клон, может быть значением. Но пока это не поддерживается.

EDIT: Чтобы загрузить массив, добавьте его, а затем сохраните:

var words = JSON.parse(localStorage.getItem("words"));
words.push("hello");
localStorage.setItem("words", JSON.stringify(words));

Ответ 2

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

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

  // key magic
  // value magic

});

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

Ответ 7

localStorage является Object.

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

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

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