sessionStorage, IndexedDB и выбор подходящего API

sessionStorage предоставляет в точности те же методы, что и localStorage, но срок его действия связан с вкладкой. Когда вкладка или окно закрывается, данные автоматически очищаются.

Кроме того, это хранилище изолировано для каждой вкладки, поэтому две вкладки не используют общие данные sessionStorage.

sessionStorage особенно хорошо подходит для многоэтапной формы, в которой нужно сохранять прогресс после перезагрузки в течение текущего сеанса, но удалять его при закрытии вкладки.

Пользователь может обновить страницу в середине заполнения формы, не потеряв введённые данные, но после завершения или ухода ничего не останется.

IndexedDB — это встроенная в браузер асинхронная транзакционная база данных. Она может хранить значительно больше лимита localStorage в 5 МБ и работать со структурированными объектами, массивами и даже двоичными данными.

Поскольку IndexedDB работает асинхронно, она не блокирует основной поток, в отличие от localStorage.

Исходный программный интерфейс IndexedDB многословен и основан на событиях, поэтому библиотеки вроде idb-keyval оборачивают его в простые функции на основе промисов, такие как get, set и del.

Это обеспечивает удобство использования, аналогичное localStorage, но с объёмом и асинхронным поведением IndexedDB.

Поскольку IndexedDB может хранить значения Blob и ArrayBuffer, она идеально подходит для кэширования изображений, аудио, загруженных файлов или ресурсов для работы офлайн.

Такие данные быстро превысили бы ограничения localStorage, а для их хранения пришлось бы преобразовать их в строки, чего не требуется в IndexedDB.

Программный интерфейс Cache, часто используемый с сервисными работниками, сохраняет целые объекты HTTP Response, связанные с запросами. Он специально предназначен для кэширования сетевых ответов с приоритетом офлайн-режима.

Используйте его, чтобы отдавать ресурсы и ответы программного интерфейса без обращения к сети, когда устройство не подключено.

localStorage сохраняет данные навсегда, пока его не очистят, sessionStorage действует только в течение сеанса вкладки, IndexedDB сохраняет данные навсегда, а файлы cookie имеют настраиваемый срок действия через свои атрибуты.

Если сопоставить нужный срок хранения с подходящим хранилищем, можно избежать неожиданностей, связанных с исчезновением данных.

Объём localStorage и sessionStorage ограничен примерно 5 МБ, объём файлов cookie — примерно 4 КБ каждый, а IndexedDB может использовать сотни мегабайт и больше в зависимости от устройства и браузера.

Для сколько-нибудь больших объёмов данных IndexedDB — единственный практичный вариант в браузере.

localStorage, sessionStorage и файлы cookie работают синхронно, блокируя главный поток во время доступа. IndexedDB и Cache API работают асинхронно и основаны на Promise.

Асинхронный доступ сохраняет отзывчивость интерфейса даже при чтении или записи больших объёмов данных.

Используйте файлы cookie с атрибутом httpOnly для токенов аутентификации, чтобы сценарии не могли их прочитать, localStorage — для небольших постоянных настроек, IndexedDB — для больших файлов и сложных данных, доступных офлайн, а sessionStorage — для краткосрочных черновиков в пределах одной вкладки.

Выбирайте хранилище с учётом чувствительности данных, их объёма и срока хранения.

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

Обычно приложение использует несколько вариантов: файлы cookie для аутентификации, localStorage для настроек и IndexedDB для ресурсов, доступных офлайн.

Проверьте, насколько хорошо Вы понимаете выбор хранилища.

Вы сравнили sessionStorage, localStorage, IndexedDB, файлы cookie и Cache API по сохранности, объёму, синхронности и безопасности.

Вы научились выбирать хранилище по сценарию использования: файлы cookie — для аутентификации, localStorage — для небольших настроек, IndexedDB — для больших или сложных данных, а sessionStorage — для черновиков в пределах вкладки.