Проход по элементам localStorage в JS: цикл for...in

Быстрый ответ

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

for (let i = 0; i < localStorage.length; i++) {
  console.log(localStorage.key(i), localStorage.getItem(localStorage.key(i)));
}

Приведенный выше код позволяет вывести каждую пару ключ-значение, демонстрируя, как происходит непосредственное перебор и извлечение данных.

Обходим ограничения: сохраняем нестроковые данные

localStorage предполагает хранение данных в формате строк. Для сохранения массивов или объектов их нужно сериализовать с помощью JSON.stringify и десериализовать через JSON.parse:

// Сохраняем объект в localStorage
localStorage.setItem('userData', JSON.stringify({ name: 'John', age: 30 }));

// Извлекаем сохранённый объект
let userData = JSON.parse(localStorage.getItem('userData'));
console.log(userData.name); // выводит: John

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

Перебор всех элементов: полезные паттерны и типичные ошибки

Забудьте про for...in!

Цикл for...in не подходит для перебора элементов в localStorage. Этот цикл применим для работы с объектами общего назначения, но не для объектов Storage.

Подробнее об этом расскажет наш спикер на видео

Все ключи под контролем: использование Object.keys()

Используйте Object.keys(), чтобы извлечь все ключи из localStorage и применить методы массивов, такие как .forEach(), .map() и .filter():

Object.keys(localStorage).forEach((key) => {
  console.log(key, localStorage.getItem(key));
});

Сочетайте ключи с Object.entries()

Итерация может быть упрощена с помощью Object.entries(), которые возвращают массив пар ключ-значение:

Object.entries(localStorage).forEach(([key, value]) => {
  console.log(key, value); // выводит: ключ и соответствующее строковое значение
});

Перебор с использованием jQuery

Если вы предпочитаете jQuery, то $.each облегчит процесс итераций:

$.each(localStorage, (key, value) => {
  console.log(key, value);
});

Особенность работы в Chrome

В Chrome существует возможность перебирать localStorage напрямую, без использования .key():

for (let key in localStorage) {
  if (localStorage.hasOwnProperty(key)) {
    console.log(key, localStorage[key]);
  }
}

Визуализация

Вообразите localStorage как галерею, где каждая картина – это элемент:

Проход по галерее аналогичен проходу по localStorage:

for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i);        // Получаем название картины
    let value = localStorage.getItem(key); // Рассматриваем её содержимое
}

Как и при проходе по галерее, каждый шаг по localStorage позволяет нам изучить значение элемента по его ключу.

Работа с особыми и специфическими случаями

Соблюдаем последовательность: прибегаем к помощи массивов!

Используйте массивы для сохранения последовательности элементов. Они помогают сохранить исходный порядок:

// Сохраняем массив
let items = ['item1', 'item2', 'item3'];
localStorage.setItem('items', JSON.stringify(items));

// Извлекаем и перебираем массив
items = JSON.parse(localStorage.getItem('items'));
items.forEach((item) => {
  console.log(item); // Выведет 'item1', 'item2', 'item3' в сохранённом порядке
});

Безопасность и совместимость: не забываем проверять браузер!

Важно убедиться в поддержке localStorage и методов сериализации, особенно если есть вероятность столкнуться со старыми версиями браузеров или нетипичными настройками:

if (typeof Storage !== 'undefined') {
  // Всё в порядке, хранилище поддерживается!
} else {
  // К сожалению, веб-хранилище не поддерживается.
}

Учитываем особенности: работа со сложными данными

Постарайтесь избегать разбиения сложных данных на строки. Лучше сохранять структурированные данные с уникальными ключами для более удобного доступа. Обратите внимание на лимиты хранилища (обычно это 5MB) и на политику браузеров, которая может влиять на ваш подход к использованию этого хранилища.

Полезные материалы

1. Window: localStorage property – Web APIs | MDN — полезный ресурс для изучения API локального хранилища.
2. HTML Web Storage API — лёгкий в освоении учебник с реальными примерами работы с Веб-хранилищем HTML5.
3. LocalStorage, sessionStorage — подробное описание применения локального и сессионного хранилища в JavaScript.
4. HTML5 – Web Storage — обзор веб-хранилища в HTML5 с примерами использования.
5. localStorage in JavaScript: A complete guide – LogRocket Blog — дополнительная информация о применении localStorage и его специфических случаях использования.
6. An Overview of the Web Storage API — SitePoint — доступное объяснение API веб-хранилища с рекомендациями по использованию.
7. Introduction to localStorage and sessionStorage | DigitalOcean — вводное руководство по веб-хранилищу, акцентирующее внимание на безопасности хранения данных и лучших практиках использования.