Какие браузерные хранилища существуют и в чем их отличия

Что проверяют

Знаете ли вы что-то кроме localStorage и думаете ли про синхронность, квоты и безопасность. Почти всегда следом идёт вопрос, где хранить токен авторизации, и там видно, различаете ли вы угрозы XSS и CSRF.

Как отвечать

Пройдитесь по списку с конкретикой:

• cookies: около 4 КБ на запись, уходят на сервер с каждым запросом к домену. Флаги HttpOnly (недоступна из JS), Secure, SameSite (по умолчанию Lax), срок через Max-Age. Единственное хранилище, которое видит сервер;
• localStorage: примерно 5 МБ на origin, только строки, синхронный API, живёт до ручной очистки. Синхронность значит блокировку главного потока, большие объекты туда не кладут. Событие storage уведомляет другие вкладки;
• sessionStorage: тот же интерфейс, но область видимости это вкладка: переживает перезагрузку, исчезает вместе с ней;
• IndexedDB: асинхронная и транзакционная, хранит структурированные клоны (объекты, Blob, ArrayBuffer), поддерживает индексы и курсоры. Сырой API многословный, на практике берут idb;
• Cache API: пары запрос и ответ для service worker, основа офлайна;
• OPFS: приватная файловая система origin (navigator.storage.getDirectory()), синхронный доступ в воркере, большие файлы и SQLite в WebAssembly.

Про объём: квота сайта считается от свободного места на диске, узнать её можно через navigator.storage.estimate(), а navigator.storage.persist() просит не вытеснять данные. WebSQL и AppCache из браузеров удалены.

Про безопасность: любой XSS читает localStorage и IndexedDB целиком, поэтому долгоживущие токены логичнее держать в куке с HttpOnly и SameSite. В Safari скриптовые хранилища могут очищаться после недели без визитов, а в стороннем контексте хранилище разделено по верхнему сайту.

Где спотыкаются

Кладут JWT в localStorage и объясняют это защитой от CSRF, забывая, что от XSS схема не защищает вообще.

Пишут в localStorage мегабайты синхронно, ловят фризы интерфейса и QuotaExceededError, который не обрабатывают.

Считают sessionStorage общим для всех вкладок, а localStorage общим для поддоменов. Оба привязаны к origin (схема, домен и порт), а sessionStorage ещё и к вкладке.