Цикл через 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){
    $('body').append(localStorage[x]);
}

но безрезультатно. Есть идеи?

другая идея у меня была что-то вроде

localStorage.setItem(1,'Lorem|Ipsum|Dolor')
var split_list = localStorage.getItem(1).split('|');

, в котором for...in работает.

6 70
javascript objective-c loops html5 local-storage

6 ответов:

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

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

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

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

  // key magic
  // value magic

});

в конце концов, сделать объект с:

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

21

самый простой способ-это:

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

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

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

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

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

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

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

1

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

0