Хранилища браузера: сравнение cookie, Web Storage и IndexedDB

Что это такое

Cookie — пары имя–значение, задаваемые сервером через Set-Cookie или скриптом и отправляемые обратно с каждым подходящим запросом. RFC 6265 рекомендует пользовательским агентам поддерживать не менее 4096 байт на cookie, 50 cookie на домен и 3000 в сумме и разрешает удалять cookie сверх таких пределов. Web Storage из стандарта HTML предлагает localStorage, сохраняющее данные для каждого источника, и sessionStorage, ограниченное одним контекстом обхода верхнего уровня — вкладкой или окном — и завершающееся вместе с ним; оба хранилища синхронны и сохраняют только строки. Страница MDN о квотах указывает общий предел Web Storage в 10 MiB: 5 MiB для localStorage и 5 MiB для sessionStorage на источник; при превышении выбрасывается QuotaExceededError. IndexedDB асинхронна, поддерживает транзакции, хранит структурированные значения и двоичные объекты с индексами и использует общую квоту источника, которая в браузерах на основе Chromium может достигать 60% диска. По умолчанию данные хранятся по возможности и при нехватке ресурсов могут быть удалены. navigator.storage.persist() запрашивает постоянное хранение, navigator.storage.estimate() сообщает использование и квоту, а приватный режим обычно удаляет данные после завершения сеанса.

Почему это важно

Неправильный выбор создаёт проблемы безопасности или надёжности: токен сеанса в localStorage доступен любому внедрённому скрипту; большое состояние в cookie раздувает каждый запрос; крупная синхронная запись в localStorage блокирует основной поток; приложение, считающее негарантированно сохраняемые данные вечными, незаметно ломается после их удаления.

Как применять

• Данные, нужные серверу в каждом запросе, например идентификатор сеанса: небольшая cookie с HttpOnly, Secure и ограничением пути. Ничего другого в cookie не помещайте.
• Небольшие настройки только для клиента: localStorage, с каждым обращением внутри try/catch, поскольку заполнение или блокировка хранилища могут вызвать исключение.
• Временное состояние отдельной вкладки, например этап мастера или черновые фильтры: sessionStorage.
• Записи, файлы, автономные кеши: IndexedDB за небольшой обёрткой, чтобы остальной код работал с промисами.
• Версионируйте структуру данных (settings:v2) и при несовпадении мигрируйте или удаляйте их.
• Прежде чем полагаться на хранилище для важных данных, вызовите persist() и трактуйте отказ как «данные могут исчезнуть».

Подводные камни

Хранилище разделяется по источникам: app.example.com и example.com не используют общее localStorage, тогда как cookie с Domain=example.com отправляется обоим, а по портам cookie не изолируются. Браузеры могут дополнительно разделять хранилище сайта, встроенного в сторонние фреймы. JSON.stringify отбрасывает undefined и превращает Date в строки; выполняйте десериализацию осознанно.