РАЗЛИЧИЯ МЕЖДУ COOKIE, API ВЕБ-ХРАНИЛИЩА, ИНДЕКСИРОВАННОЙ БД

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

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

Чаще всего используются такие типы хранилищ, как API веб-хранилища (локальное хранилище, хранилище сеансов), файлы cookie (постоянные файлы cookie сеанса) и индексированная база данных.

Другими типами хранилищ являются WebSQL (не реализовано в Firefox, Edge, IE) и Cache API (часть Service worker, который мы могли бы обсудить в другом посте).

Web SQL по-прежнему не является признанным стандартом и не рекомендуется к использованию. Кроме того, не рекомендуется использовать кэш приложений.

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

1. Файлы cookie

Давайте сначала обсудим наши старые куки, которые существуют с 1994 года (не говоря уже о том, кто здесь победитель!)

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

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

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

ТИПЫ: постоянный файл cookie и файл cookie сеанса.

ТИПЫ ДАННЫХ: в файлах cookie могут храниться только строки.

РАЗМЕР: Он очень ограничен. Он варьируется от 4 КБ до 1 МБ в зависимости от браузера.

ВРЕМЯ ЖИЗНИ: постоянные файлы cookie действуют до истечения срока их действия. Разработчик может указать возраст или конкретную дату. По умолчанию он существует в течение 30 минут, который может быть изменен на более чем год. Сессионные куки очищаются после закрытия вкладки. (Дополнительные ссылки приведены в конце этого поста)

ИСПОЛЬЗОВАНИЕ: используется для хранения токена доступа для аутентификации. JWT - недавняя альтернатива файлам cookie для аутентификации.

document.cookie = 'message=Storages; expires=Mon, 26 January 2020 12:04:05 UTC'

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

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

ТИПЫ: локальное хранилище и хранилище сеансов. Локальное хранилище используется всеми вкладками одного домена, а хранилище сеансов зависит от вкладки, на которой оно установлено.

ТИПЫ ДАННЫХ. Любой тип даты, например строки, объекты, массивы и т. д., можно легко сохранить.

РАЗМЕР: Safari позволяет сафари локального хранилища 5 МБ и неограниченное хранилище сеансов. В то время как Chrome и Firefox позволяют 10 МБ локального и сеансового хранилища.

ВРЕМЯ ЖИЗНИ: хранилище сеанса очищается при закрытии вкладки. Разработчик может очистить локальное хранилище. Он существует до тех пор, пока не будет одобрен веб-сайтом.

ИСПОЛЬЗОВАНИЕ: его можно использовать для хранения промежуточных данных и использовать для отправки запросов в областях с плохой связью. Может использоваться для хранения данных, которые должны использоваться на вкладках, для хранения информации пользователя, такой как товары в корзине, напоминания и т. Д.

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

localStorage.setItem('message', 'storages are cool')
localStorage.getItem('message')

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

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

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

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

РАЗМЕР: без ограничений.

ИСПОЛЬЗОВАНИЕ: его можно использовать, когда необходимо выполнить дорогостоящую операцию с данными перед их извлечением и использованием в приложении, не затрагивая поток пользовательского интерфейса.

var db;
var request = indexedDB.open("MyTestDatabase");
request.onsuccess = function(event) {
  db = event.target.result;
};

ИСПОЛЬЗОВАННАЯ ЛИТЕРАТУРА

Https://medium.com/swlh/cookies-vs-localstorage-whats-the-difference-d99f0eb09b44, https://flaviocopes.com/cookies/, https://flaviocopes.com/web- storage-api / , https://flaviocopes.com/indexeddb/

Поделитесь своими мыслями о типах хранилищ в комментариях.

Спасибо за прочтение. :)