Понимание типа хранилища в веб-браузере.

Эта статья будет подробным сравнением методов хранения файлов cookie, LocalStorage, SessionStorage, IndexedDB и WebSQL, доступных в веб-браузере.

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

Наиболее часто используемые и стандартные методы хранения — это API-интерфейсы веб-хранилища, т. е. сеансовое и локальное хранилище, файлы cookie и индексированная БД.

О Cache API и WebSQL мы поговорим отдельно ближе к концу этой статьи.

Я надеюсь, что эта статья поможет вам различать варианты использования всех методов хранения, предоставляемых веб-браузерами.

Печенье

Файлы cookie существуют с самого начала существования Интернета и до сих пор широко используются для хранения небольшого объема данных в рамках взаимодействия клиент-сервер.

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

• Файлы cookie бывают двух типов: постоянные и сеансовые.
• Файлы cookie имеют очень ограниченный размер, то есть обычно 4 КБ, а для некоторых браузеров он достигает 1 МБ. Он хранит только данные String.
• Файлы cookie имеют срок действия, установленный сервером, что означает, что они будут сохраняться до истечения срока их действия. Однако файлы cookie сеанса удаляются, как только пользователь завершает сеанс. то есть закрытие вкладки браузера.
• Мы используем файлы cookie для аутентификации, чтобы поддерживать сеанс пользователя, и почти всей персонализацией пользователя можно управлять с помощью файлов cookie.

Файлы cookie отправляются с заголовками запроса и ответа API-взаимодействий, поэтому, если у нас есть ненужные файлы cookie при отправке запроса и ответа, это замедлит работу приложения.

API веб-хранилища или хранилище DOM (хранилище сеансов и локальное хранилище)

API-интерфейсы веб-хранилища были представлены с HTML5, в отличие от файлов cookie, ему не нужны HTTP-запросы и ответы, но они хранятся на стороне клиента в дисковом хранилище. В отличие от файлов cookie, API-интерфейсы веб-хранилища позволяют хранить массивы, объекты, а также строки. Давайте посмотрим более подробно о сеансе и локальном хранилище отдельно. Данные, хранящиеся в Web Storage API, не защищены. Рекомендуется не хранить конфиденциальные данные в локальном хранилище или хранилище сеансов.

Хранилище сеансов

Браузеры используют хранилище сеансов для хранения данных, срок действия которых истекает после завершения сеанса пользователем.

• Хранилище сеансов имеет максимальную емкость хранения 5 МБ на сеанс.
• SessionStorage зависит от сеанса, что означает, что для каждой вкладки будет разное хранилище.
• Закрытие сеанса не включает перезагрузку/обновление, что означает, что на данные сеанса не влияют никакие перезагрузки или обновления страницы.
• SessionStorage привязан к источнику, что означает, что даже для одного и того же домена поддомены будут выводить разные объекты хранения и не могут получать доступ к данным друг от друга.

sessionStorage.setItem('key', 'value you wanna set')
sessionStorage.getItem('key')

Локальное хранилище

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

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

Он работает как пара ключ-значение, и мы можем использовать методы setItem() и getItem() для установки и извлечения данных из локального хранилища. например

localStorage.setItem('key', 'value you wanna set')
localStorage.getItem('key')

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

Индексированная БД

IndexedDB — это один из методов хранения ключей/значений, по сути, база данных NoSQL.

Это асинхронный API, что означает, что выполнение дорогостоящих операций не будет блокировать поток пользовательского интерфейса, замедляя работу пользователей. Но поскольку JavaScript имеет асинхронные возможности с введением промисов, IndexedDB мало используется.

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

Кэш API

Cache API является частью спецификации Service Worker и является отличным способом повысить эффективность кэширования ресурсов.

Cache API предлагает кешировать ресурсы, которые мы можем открыть как некоторый URL, то есть ресурсы, веб-страницы, ответы HTTP API. Почти все современные веб-браузеры поддерживают Cache API.

Как только мы обнаружим и обнаружим, что браузер поддерживает Cache API, мы можем использовать метод add для добавления ресурсов, которые мы хотим кэшировать.

cache.add('/api/endpoint')

Поскольку эта статья не предназначалась для руководства по кодированию Cache API, я оставлю ссылку на то, как реализовать Cache API.

Хранилище WebSQL не предлагается в Firefox, Edge и Internet Explorer. Он до сих пор не является общепризнанным стандартом и не рекомендуется к использованию. Теперь это устарело. Это все, что касается общих вариантов хранения, доступных в веб-браузере.

Ссылки:

Файлы cookie: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
Хранилище сеансов: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorageЛокальное хранилище: https://developer.mozilla.org/en-US/docs/Web/API/Window/ localStorage
Реализация Cache API: https://flaviocopes.com/cache-api/

Спасибо за чтение и дайте мне знать, если вы найдете это полезным. :))