Сохранение и работа с массивом в localStorage на JavaScript

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

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

// Сериализуем массив фруктов и сохраняем его в localStorage
localStorage.setItem('fruits', JSON.stringify(['🍏', '🍌', '🍒'])); 

// Извлекаем массив из localStorage и десериализуем его
let fruits = JSON.parse(localStorage.getItem('fruits'));

Расширение функционала localStorage с помощью вспомогательных функций

Создание методов setObj и getObj

Внедрение специализированных методов setObj и getObj для Storage может значительно облегчить сохранение и восстановление данных не в виде строк.

// Расширяем функциональные возможности стандартного объекта Storage
Storage.prototype.setObj = function(key, obj) {
    this.setItem(key, JSON.stringify(obj));
};
Storage.prototype.getObj = function(key) {
    return JSON.parse(this.getItem(key));
};

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

Структурированные ключи для иерархического хранения

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

// Сохраняем настройки оформления для пользователя
localStorage.setObj('user.settings.theme', { color: 'blue', font: 'Arial' });

// Извлекаем настройки оформления
let themeSettings = localStorage.getObj('user.settings.theme');

Поддержка старых браузеров

Для работы со localStorage в старых браузерах, включая Internet Explorer 7, стоит добавить библиотеку json2.js, которая предоставляет функции JSON.stringify и JSON.parse.

<!--[if IE 7]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<![endif]-->

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

В localStorage каждый элемент, подобно книге, требует правильной упаковки и меток. Мы упаковываем и маркируем данные:

let array = ['🍏', '🍊', '🍓'];                  // Массив фруктов
localStorage.setObj('fruits', array);             // Сохраняем его под подходящим ключом

При извлечении мы ищем по метке и "распаковываем":

let storedArray = localStorage.getObj('fruits');  // Получаем сохраненный ранее массив

Так как localStorage работает только со строками, важно правильно использовать сериализацию (JSON.stringify) и десериализацию (JSON.parse).

Проблемы и меры предосторожности

При работе с localStorage важно быть в курсе его строковой природы. Следует обращать внимание на следующее:

• Ключи должны быть интуитивно понятными: Используйте названия методов вместо localStorage.keyName.

• Берегите данные от специальных символов: JSON.stringify поможет избежать проблем с спецсимволами.

• Помните о лимите localStorage: Вашему использованию доступно около 5МБ, это подходит для хранения не очень больших объемов данных.

Советы по использованию localStorage

Ознакомьтесь с нашими рекомендациями, чтобы стать профессионалом в работе с localStorage:

Организация данных

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

Обработка ошибок

Не забывайте обрабатывать ошибки в случае переполнения localStorage.

try {
    localStorage.setObj('fruits', ['🍏', '🍌', '🍒']);
} catch(e) {
    if(e === QUOTA_EXCEEDED_ERR){
        console.error('Ошибка: превышена квота, слишком много фруктов!');  
    }
}

Очистка данных

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

localStorage.removeItem('unusedDataKey'); // Удаляем старые данные

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

1. Web Storage API – MDN Web Docs — Подробное руководство по возможностям Web Storage API.
2. Window: localStorage – MDN Web Docs — Официальная документация по localStorage.
3. HTML5 Web Storage — Руководство по использованию Web Storage в HTML5 с примерами.
4. LocalStorage, sessionStorage — Учебник по изучению LocalStorage и sessionStorage.
5. HTML5 – Web Storage — Обзор особенностей использования HTML5 Local Storage.
6. Stack Overflow: How to store objects in HTML5 localStorage/sessionStorage — Обсуждение вопросов хранения объектов в Web Storage на Stack Overflow.