Как получить данные из localStorage?

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

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

Метод getItem()

Для получения данных из localStorage используется метод getItem(key), где key — это строка, соответствующая ключу, под которым данные были сохранены. Метод возвращает строку или null, если ключ отсутствует. Поскольку localStorage хранит только строки, для работы с объектами или массивами необходимо использовать JSON.parse().

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

// Получение и парсинг
const storedUser = localStorage.getItem('user');
if (storedUser) {
  const parsedUser = JSON.parse(storedUser);
  console.log(parsedUser.name); // Alice
} else {
  console.log('Ключ не найден');
}

Практическое применение

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

Вывод

localStorage — простой и быстрый способ хранения данных на клиенте, подходящий для небольших объёмов информации (до 5-10 МБ). Используйте его для кэширования настроек или состояния, но избегайте хранения чувствительных данных, так как они доступны через JavaScript.