Перегляд localStorage у HTML5 та JavaScript

Отже, я думав, що можу просто прокрутити localStorage як звичайний об’єкт, оскільки він має довжину. Як я можу пройти через це?

localStorage.setItem(1,'Lorem');
localStorage.setItem(2,'Ipsum');
localStorage.setItem(3,'Dolor');

Якщо я роблю a, 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"]));

Проект специфікації стверджує, що будь-який об'єкт, який підтримує структурований клон, може бути цінністю. Але це, схоже, ще не підтримується.

EDIT: Щоб завантажити масив, додайте до нього, а потім збережіть:

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 для / in Statement, як і будь-який інший об'єкт.

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

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