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

Кэширование и хранение могут повысить производительность, надежность и удобство работы пользователей (UX).

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

Хранилище — это не только файлы и активы, оно может включать и другие типы данных. Вы можете управлять всем хранилищем устройства с помощью Storage Manager API на поддерживаемых платформах.

Типы хранилища браузера

Файлы cookie

Cookie-файлы — это очень маленькие данные, хранящиеся в вашем браузере, которые могут сэкономить до 4 КБ, и это единственное хранилище, отправляемое с каждым HTTP-запросом браузером из этого домена. . Файлы cookie в основном используются для управления сессиями.

Веб-сайты обычно используют файлы cookie, чтобы гарантировать, что пользователи распознаются при переходе между страницами, поэтому им не предлагается каждый раз входить в систему снова. Веб-сайты также используют файлы cookie для запоминания введенной пользователями информации. Например, сайты электронной коммерции используют файлы cookie для запоминания товаров, помещенных в корзину.

ПРИМЕЧАНИЕ. Файлы cookie ни в коем случае нельзя использовать для хранения данных. Но это отличный способ поделиться состоянием клиента с сервером и в основном используется для аутентификации на основе файлов cookie.

Существует 2 способа создания файлов cookie: JavaScript и веб-сервер.

Файлы cookie имеют область действия: домен и путь.

Кроме того, существует два типа файлов cookie:

  • Сеансовые файлы cookie. Они удаляются при завершении работы клиента. Веб-браузеры могут использовать восстановление сеанса, что делает большинство файлов cookie сеанса постоянными, как если бы браузер никогда не закрывался.
  • Постоянные файлы cookie. Срок действия постоянных файлов cookie истекает не при закрытии клиента, а в определенную дату (Expires) или по истечении определенного периода времени (Max-Age).

Ознакомьтесь с разделами Узнайте, как работают файлы cookie HTTP или Ускоренный курс использования файлов cookie HTTP и Как файлы cookie могут отслеживать вас.

API веб-хранилища

Web Storage APIпредоставляет механизмы, с помощью которых браузеры могут хранить пары ключ-значение гораздо более интуитивным способом, чем использование файлов cookie. Это менее полезно для хранения больших объемов структурированных данных.

Он определяет два механизма хранения, которые очень важны: Хранилище сеансов и Локальное хранилище, часть набора вариантов хранения, доступных на веб-платформе.

LocalStorage — это локальное хранилище для ваших браузеров, которое может сэкономить до 10 МБ. Только чтение на стороне клиента.

Как разработчики, мы должны избегать использования localStorage, потому что это синхронно и вызывает проблемы с производительностью. Также мы не должны хранить в нем какие-либо данные безопасности или конфиденциальные данные.

Конфиденциальные данные включают: идентификаторы пользователей, идентификаторы сеансов, JWT, личную информацию, информацию о кредитной карте, ключи API.

Подробнее: Пожалуйста, прекратите использование локального хранилища

SessionStorage делает то же самое, но, как следует из названия, оно основано на сеансе и будет удалено после закрытия браузера, а также может сохранять меньше, чем LocalStorage, например, до 5 МБ. Только чтение на стороне клиента. Также мы не должны хранить в нем данные безопасности.

Подробнее о API веб-хранилища: локальное хранилище и хранилище сеансов

Веб-база данных SQL

О, забудь об этом.

Спецификация базы данных Web SQL устарела с ноября 2010 г..

Подробнее: Веб-база данных SQL

ИндекседБД

IndexedDB — это нереляционная база данных. Он хорош для хранения всех видов данных, таких как: JS-объекты, файлы, блобы и т. д. Он работает асинхронно через транзакции и основан на событиях.

Используйте IndexedDB для хранения структурированных данных. Сюда входят данные, которые должны быть доступны для поиска или комбинирования способом, подобным NoSQL, или другие данные, такие как пользовательские данные, которые не обязательно соответствуют URL-запросу. Обратите внимание, что IndexedDB не предназначен для полнотекстового поиска.

Подробнее о Как мы используем IndexedDB, Погружение в IndexedDB, IndexedDB — PWA или Простое введение в IndexedDB.

API хранилища кэша

CacheStorage API — это мощный инструмент. Мы можем кэшировать наши статические ресурсы приложения, такие как HTML, CSS и JavaScript. Это позволяет нам гарантировать, что они всегда доступны мгновенно.

Вы можете использовать Cache Storage API для загрузки, хранения, удаления или обновления ресурсов на устройстве. Затем эти активы можно будет обслуживать на устройстве без запроса сети.

Используйте Cache Storage API для сетевых ресурсов, к которым вы бы получили доступ, запросив их через URL-адрес, например HTML, CSS, JavaScript, изображения, видео и аудио.

Подробнее о Кэширование в PWA

Краткое содержание

IndexedDB и CacheStorage поддерживаются во всех современных браузерах. Они оба асинхронны и не будут блокировать основной поток. Они доступны из объекта окно, веб-воркеров и сервис-воркеров.

Использование CacheStorage API и IndexedDB позволяет эффективно хранить все ресурсы, необходимые вашему приложению для работы.

Для офлайн-хранилища используйте Cache API.

Для хранения состояния приложения и пользовательского контента используйте IndexedDB.

НО если вы хотите создать страницы с общим состоянием (страница, которой вы хотите поделиться с другими), например страницу поиска, используйте строку запроса URL для хранения эта информация.

Источники: