localStorage в JavaScript: хранение данных в браузере

О проверке кода. Примеры не запускались в браузере — в отличие от материалов по Node.js с фактическим выводом. Говорим прямо, а не ставим бейдж «проверено».

Иногда данные нужно сохранить между визитами: тему оформления, черновик, корзину. localStorage — простейший способ сделать это в браузере. Разберём его правильное применение и границы.

Базовые операции

localStorage.setItem('theme', 'dark');   // сохранить
localStorage.getItem('theme');           // 'dark' — прочитать
localStorage.getItem('missing');         // null — если ключа нет
localStorage.removeItem('theme');        // удалить один ключ
localStorage.clear();                    // удалить всё

localStorage — хранилище пар ключ-значение, которое переживает перезагрузку и закрытие браузера. Данные привязаны к домену и остаются, пока их явно не удалят или пользователь не очистит данные сайта. getItem для несуществующего ключа возвращает null — это удобно проверять.

Главная ловушка: только строки

const user = { name: 'Аня', age: 30 };

// ❌ объект превратится в бесполезную строку
localStorage.setItem('user', user);
localStorage.getItem('user');            // '[object Object]' — данные потеряны!

// ✅ через JSON
localStorage.setItem('user', JSON.stringify(user));   // сохраняем
const saved = JSON.parse(localStorage.getItem('user')); // читаем
saved.name;                              // 'Аня'

localStorage хранит только строки. Попытка сохранить объект напрямую превращает его в бесполезное '[object Object]'. Объекты и массивы сериализуют через JSON.stringify при записи и разбирают через JSON.parse при чтении. Это самая частая ошибка новичков с localStorage.

Безопасное чтение с обработкой ошибок:

function loadUser() {
  const raw = localStorage.getItem('user');
  if (!raw) return null;
  try {
    return JSON.parse(raw);              // данные могли повредиться
  } catch {
    return null;
  }
}

JSON.parse бросает на невалидной строке, а содержимое localStorage могло повредиться или устареть — поэтому чтение оборачивают в try/catch.

localStorage против sessionStorage против cookies

• localStorage — постоянное хранение на клиенте: тема, язык, черновики, кэш;
• sessionStorage — тот же API, но данные исчезают при закрытии вкладки: временное состояние;
• cookies — маленькие (≈4 КБ), автоматически шлются на сервер с каждым запросом: авторизация, сессии.

Ключевое: localStorage не отправляется на сервер сам по себе — это чисто клиентское хранилище.

Безопасность: что нельзя хранить

Никогда не храните в localStorage пароли, токены доступа и чувствительные данные. Причина: localStorage доступен любому JavaScript на странице. Если на сайт проникнет вредоносный скрипт (через XSS), он прочитает всё содержимое хранилища и отправит злоумышленнику. Токены авторизации безопаснее хранить в httpOnly-cookie — к ней JavaScript не имеет доступа. Это правило часто нарушают, и оно приводит к угонам сессий.

Лимиты и практичные приёмы

// реакция на изменение в другой вкладке
window.addEventListener('storage', (e) => {
  console.log(`ключ ${e.key} изменился на ${e.newValue}`);
});

// удобная обёртка
const store = {
  set: (k, v) => localStorage.setItem(k, JSON.stringify(v)),
  get: (k) => JSON.parse(localStorage.getItem(k) ?? 'null'),
};
store.set('cart', [1, 2, 3]);
store.get('cart');   // [1, 2, 3]

Лимит localStorage — около 5–10 МБ на домен (зависит от браузера). Этого с запасом хватает для настроек и небольших данных, но мало для файлов или больших наборов — для них есть IndexedDB. Полезная деталь: событие storage срабатывает в других вкладках при изменении — так синхронизируют состояние между вкладками. Небольшая обёртка с JSON избавляет от ручного stringify/parse на каждом вызове.

Смежные темы: JSON — хранение объектов; обработка ошибок — безопасный parse; создание элементов — про XSS. Полный список — в уроках JavaScript.