Какие данные лучше не хранить в LocalStorge?

Какие данные НЕЛЬЗЯ хранить в LocalStorage: полный разбор с примерами

LocalStorage — удобный инструмент для хранения данных на стороне клиента, но его абсолютная НЕбезопасность и ограничения делают его непригодным для определённых типов данных. Вот полный список категорий данных, которые нельзя хранить в LocalStorage, с детальным обоснованием.

1. Конфиденциальные и персональные данные (самое критичное)

Этот пункт — абсолютное табу. Ни при каких условиях нельзя хранить:

• Пароли, токены аутентификации (JWT, OAuth tokens)
• Паспортные данные, номера банковских карт (PAN, CVV)
• Медицинские записи (информация о здоровье)
• Любые персональные данные (ПДн) по GDPR/152-ФЗ

Почему: LocalStorage не имеет встроенной защиты. Любой скрипт на вашем домене (включая вредоносные библиотеки, XSS-атаки) может прочитать эти данные. В отличие от HttpOnly cookies, данные в LocalStorage полностью доступны JavaScript.

// КАТЕГОРИЧЕСКИ НЕВЕРНЫЙ ПРИМЕР
localStorage.setItem('authToken', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...');
localStorage.setItem('creditCard', '4111111111111111');

// Любой скрипт может украсть эти данные:
const stolenToken = localStorage.getItem('authToken');
// Отправка на злоумышленный сервер...

2. Чувствительная сессионная информация

• Сессионные идентификаторы
• Данные текущего пользователя с правами доступа
• Временные коды доступа (OTP, одноразовые пароли)

Почему: При успешной XSS-атаке злоумышленник может украсть сессионные данные и полностью impersonate (выдать себя за) пользователя. Более безопасная альтернатива — Secure, HttpOnly, SameSite cookies с флагом Secure для HTTPS.

3. Критичные для безопасности настройки

• Ключи API (особенно с широкими правами)
• Секретные конфигурации приложения
• Приватные ключи или seed-фразы

Почему: Эти данные предназначены для серверной части. Попадая в LocalStorage, они становятся видимыми для всех скриптов и могут быть использованы для несанкционированных запросов к вашим API.

4. Объёмные данные (более 5-10 МБ)

Технические ограничения:

• Максимальный размер варьируется от 5 до 10 МБ в зависимости от браузера
• Синхронный API — операции блокируют главный поток

Почему: Попытка хранить большие файлы (изображения, документы) приведёт к ошибкам QuotaExceededError и деградации производительности. Для больших данных используйте IndexedDB с асинхронным доступом.

// Проблема с большими данными
try {
  // 8 МБ данных - может превысить лимит
  const hugeData = new Array(1024 * 1024 * 8).join('x');
  localStorage.setItem('bigFile', hugeData); // Возможна ошибка
} catch (e) {
  console.error('Quota exceeded!', e); // Ошибка переполнения квоты
}

5. Структурированные и часто изменяемые данные

• Сложные объекты с глубокой вложенностью
• Данные с отношениями (как в реляционных БД)
• Часто обновляемые state-объекты приложения

Почему:

• Нет типизации — только строки, объекты нужно сериализовать
• Нет транзакций — операции не атомарны
• Плохая производительность при частых обновлениях

6. Важные данные, требующие гарантий сохранности

• Несохранённые документы пользователя
• Корзина покупок с дорогими товарами
• Результаты длительной работы

Почему: LocalStorage может быть очищен пользователем, расширениями браузера или в режиме инкогнито. Нет гарантий persistence (сохранности).

Безопасные альтернативы для разных сценариев

Практические рекомендации для разработчика

Что МОЖНО безопасно хранить в LocalStorage:

• Настройки UI (тема, язык, размер шрифта)
• Кэш API-ответов (только нечувствительные данные)
• Прогресс формы (не содержащей ПДн)
• Идентификаторы для аналитики (без привязки к личности)

Правила безопасности при работе с LocalStorage:

1. Всегда валидируйте и санируйте данные перед записью
2. Используйте шифрование для любых потенциально чувствительных данных (но помните — ключ всё равно в коде)
3. Реализуйте очистку устаревших данных для экономии пространства
4. Обрабатывайте ошибки QuotaExceededError грациозно
5. Предоставляйте fallback на случай недоступности LocalStorage

// Пример безопасного использования — настройки UI
const uiSettings = {
  theme: 'dark',
  fontSize: 'medium',
  sidebarCollapsed: false
};

// Безопасное сохранение
try {
  localStorage.setItem('uiSettings', JSON.stringify(uiSettings));
} catch (e) {
  // Fallback: используем sessionStorage или переменную в памяти
  console.warn('LocalStorage unavailable, using fallback');
  sessionStorage.setItem('uiSettings', JSON.stringify(uiSettings));
}

Вывод

LocalStorage — НЕ БЕЗОПАСНОЕ ХРАНИЛИЩЕ. Его следует рассматривать исключительно как удобный инструмент для нефундаментальных, неконфиденциальных пользовательских предпочтений. Любые данные, которые могут навредить пользователю или вашему приложению при утечке, должны храниться на сервере с надлежащей аутентификацией, авторизацией и шифрованием.

Помните: «Если данные не должны быть публичными — не храните их в LocalStorage» — это золотое правило фронтенд-разработки. Современные браузеры предлагают более безопасные альтернативы (Cookie Store API, Credential Management API), которые стоит изучить для реализации надёжных систем хранения данных на клиенте.