Как сохранить данные в localStorage?

Что такое localStorage и как с ним работать

localStorage — это часть Web Storage API, предоставляющая возможность хранить пары ключ-значение в браузере. Данные сохраняются даже после закрытия вкладки или браузера и не имеют срока действия. Это удобно для хранения пользовательских настроек, состояния интерфейса или кэширования небольших объёмов данных.

Сохранение данных

Основной метод для записи — setItem(key, value). Оба параметра должны быть строками. Если нужно сохранить объект или массив, используйте JSON.stringify() для преобразования в строку.

// Сохраняем строку
localStorage.setItem('username', 'Alice');

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

// Сохраняем массив
const colors = ['red', 'green', 'blue'];
localStorage.setItem('colors', JSON.stringify(colors));

Чтение и удаление

Для получения данных используйте getItem(key), который возвращает строку или null, если ключ отсутствует. Для удаления одного элемента — removeItem(key), для полной очистки — clear().

// Читаем строку
const name = localStorage.getItem('username');

// Читаем объект (не забываем парсить)
const savedUser = JSON.parse(localStorage.getItem('user'));

// Удаляем один элемент
localStorage.removeItem('colors');

// Очищаем всё хранилище
localStorage.clear();

Важные особенности

• Данные хранятся в виде строк — любые нестроковые типы нужно явно преобразовывать.
• Размер хранилища ограничен (обычно 5–10 МБ на домен).
• localStorage синхронный — операции могут блокировать основной поток, поэтому не используйте его для больших объёмов данных.
• Данные доступны только для того же протокола, домена и порта (same-origin policy).

Вывод

localStorage — простой и эффективный способ хранения небольших объёмов данных на стороне клиента. Используйте его для сохранения пользовательских настроек, состояния интерфейса или кэширования данных, которые не требуют серверной синхронизации. Для более сложных сценариев (большие объёмы, работа с файлами) рассмотрите IndexedDB или серверное хранение.