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

70
html5 javascript local-storage loops object

6 ответов

можно использовать 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"]));

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

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

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.анализа(хранилище 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 числом. Вы можете использовать переменную typeofKey для фильтрации только по строкам, поэтому только ваши элементы отображается.

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

1

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

0