Сравните cookie, localStorage, sessionStorage и IndexedDB. Что где хранить?
Короткий ответ
- Cookie автоматически уходят на сервер с каждым запросом
- HttpOnly-cookie недоступны из JS — защита токенов от XSS
- localStorage — до ~5 МБ строк, живёт бессрочно
- sessionStorage — то же, но на время вкладки
- Оба синхронные и только для строк
- IndexedDB — асинхронная база для больших структурированных данных
- Все хранилища изолированы по origin
Cookie — для того, что должен видеть сервер (сессии, с флагами HttpOnly/Secure/SameSite), web storage — для небольших клиентских настроек, IndexedDB — для больших данных и офлайна.
Как сказать вслух
пример ответаCookie — единственное хранилище, которое браузер сам отправляет на сервер с каждым запросом, поэтому там живут сессии; с флагом HttpOnly скрипт их прочитать не может, и это защищает от кражи токена. localStorage хранит строки примерно до пяти мегабайт и переживает закрытие браузера, sessionStorage — то же самое, но умирает вместе с вкладкой. Для больших объёмов и офлайн-режима есть IndexedDB — асинхронная база данных. Я бы хранил настройки интерфейса в localStorage, сессию — в HttpOnly-cookie, а кэш данных — в IndexedDB.
Подробный ответ
Основной ответ
Главный критерий выбора — нужна ли информация серверу и насколько она чувствительна. Cookie передаются с каждым HTTP-запросом (увеличивая его размер), ограничены ~4 КБ и управляются атрибутами: Expires/Max-Age — срок, Secure — только HTTPS, HttpOnly — недоступность из document.cookie, SameSite (Lax/Strict/None) — защита от CSRF. localStorage и sessionStorage — синхронные строковые key-value хранилища около 5 МБ: первый живёт до явной очистки и общий для вкладок одного origin, второй изолирован во вкладке и очищается при её закрытии; событие storage позволяет синхронизировать вкладки. Синхронность значит, что большие чтения блокируют главный поток. IndexedDB — асинхронная транзакционная база для объектов и блобов с большими квотами, основа офлайн-режима вместе с Service Worker. Токены доступа в localStorage — спорная практика: любой XSS их похищает, поэтому предпочтительны HttpOnly-cookie.
Ключевые моменты
- Cookie и сервер. Только cookie автоматически попадают в запросы; флаги HttpOnly, Secure и SameSite — обязательный минимум для сессий.
- localStorage против sessionStorage. Разница в времени жизни и области: бессрочно и на весь origin против времени жизни вкладки.
- Безопасность токенов. Всё, что доступно из JS, доступно и XSS-атаке; чувствительные токены держат в HttpOnly-cookie.
- IndexedDB для объёмов. Асинхронность и большие квоты делают её выбором для кэшей, офлайна и больших структур; обычно через обёртки вроде idb.
Практический контекст
Практические задачи: запомнить тему оформления, корзину гостя, кэш справочников, сессию пользователя. Интервьюер часто докручивает вопросом «где хранить JWT» — ожидается рассуждение про XSS против CSRF и компромиссы. Полезно упомянуть, что доступ к хранилищам может бросать исключения (приватный режим, переполнение квоты), поэтому обращения оборачивают в try/catch.
Частые ошибки
- Хранят токены авторизации в localStorage, игнорируя риск XSS
- Не знают, что web storage хранит только строки и требует JSON.stringify
- Путают время жизни sessionStorage с «сессией пользователя» на сервере