Хранение данных в браузере

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Хранение в браузере - cookies, storage и IndexedDB

Страница может сохранять данные на клиенте: настройки темы, черновик формы, кэш справочника, идентификатор сессии. У каждого API свой объём, срок жизни и модель безопасности. Выбор неправильного хранилища ведёт к утечкам, переполнению квоты или потере данных при закрытии вкладки.

Краткие упоминания есть в основах JavaScript; здесь — сравнение и практика.

---

Сводная таблица

Механизм	Объём (ориентир)	Срок жизни	Отправка на сервер	Тип данных
Cookie	~4 КБ на cookie	задаётся Expires / Max-Age	да, с каждым запросом к домену	строка
sessionStorage	~5 МБ на origin	до закрытия вкладки	нет	строка (ключ–значение)
localStorage	~5 МБ на origin	пока пользователь не очистит	нет	строка
IndexedDB	сотни МБ+ (браузер решает)	постоянно, пока не удалят	нет	объекты, бинарные данные

Все четыре привязаны к origin (схема + хост + порт). Поддомены — отдельные origin, если не настроено иначе.

---

sessionStorage и localStorage

API одинаковый; разница только в времени жизни.

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear(); // всё для этого origin

sessionStorage.setItem('wizard-step', '2');

Хранятся только строки. Объекты — через JSON:

const draft = { title: 'Черновик', body: '…' };
localStorage.setItem('post-draft', JSON.stringify(draft));

const saved = JSON.parse(localStorage.getItem('post-draft') ?? 'null');

Когда использовать

• localStorage — тема, язык UI, флаги «подсказку уже закрывали», несекретные настройки.
• sessionStorage — многошаговая форма в одной вкладке, временное состояние мастера.

Ограничения

• Синхронный API — на больших данных блокирует главный поток.
• Нет доступа из Web Worker напрямую (только через main thread или обёртки).
• При приватном режиме данные могут не сохраняться между сессиями.

---

Cookies

Устанавливаются заголовком Set-Cookie с сервера или из JS (с ограничениями):

document.cookie = 'prefs=compact; path=/; max-age=31536000; SameSite=Lax';

Чтение — разбор строки document.cookie (неудобно); для сложной логики чаще работают через сервер или библиотеку.

Атрибут	Назначение
HttpOnly	недоступно из JS — защита от кражи через XSS
Secure	только по HTTPS
SameSite	ограничение при кросс-сайтовых запросах
Path / Domain	область действия

Сессия и JWT: токены аутентификации с флагом HttpOnly не кладут в localStorage — при XSS их прочитают. Предпочтительно cookie с HttpOnly + Secure или память вкладки + refresh по короткоживущей cookie.

---

IndexedDB

Клиентская база объектов с индексами и транзакциями. Подходит для офлайн-кэша, больших списков, файловых blob.

function openDb() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('AppCache', 1);

    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('articles')) {
        db.createObjectStore('articles', { keyPath: 'id' });
      }
    };

    request.onsuccess = () => resolve(request.result);
    request.onerror = () => reject(request.error);
  });
}

async function saveArticle(article) {
  const db = await openDb();
  return new Promise((resolve, reject) => {
    const tx = db.transaction('articles', 'readwrite');
    tx.objectStore('articles').put(article);
    tx.oncomplete = () => resolve();
    tx.onerror = () => reject(tx.error);
  });
}

API событийное и многословное; в проектах часто оборачивают в idb или хранят в Service Worker + Cache API для статики.

Когда IndexedDB

• офлайн-first приложение (PWA);
• тысячи записей с поиском по полю;
• кэш ответов API с версионированием схемы (version в open).

Не нужен для пары строк настроек — хватит localStorage.

---

Безопасность

Риск	Мера
XSS читает localStorage	не хранить секреты; Content-Security-Policy, санитизация вывода
CSRF с cookie	SameSite, токены в заголовке, проверка origin на сервере
Утечка между вкладками	sessionStorage изолирует вкладку; cookie — общие для браузера
Потеря данных	критичное — на сервере; клиент — только кэш

---

Выбор за 30 секунд

1. Нужно отправлять серверу каждый запрос? → cookie (часто с сервера).
2. Настройки UI, некритично, навсегда? → localStorage.
3. Только пока открыта вкладка? → sessionStorage.
4. Много записей, офлайн, индексы? → IndexedDB.

---

Краткий итог

Четыре уровня хранения дополняют друг друга. Для веб-приложений по умолчанию: настройки — localStorage, сессия авторизации — HttpOnly cookie, офлайн-данные — IndexedDB. Всё чувствительное дублируйте проверкой на сервере.

---