РАЗЛИЧИЯ МЕЖДУ 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/
Поделитесь своими мыслями о типах хранилищ в комментариях.
Спасибо за прочтение. :)