Хранение данных в браузере посетителя может упростить работу вашего приложения, защитить конфиденциальность и обеспечить более высокую скорость работы
Хранение данных на стороне клиента необходимо для веб-приложений. Оно может быть не таким пуленепробиваемым, как хранилище на стороне сервера, но без него веб-приложения не смогли бы реализовать многие современные функции. От хранения данных на стороне клиента зависят всевозможные функции, от сессий в играх до корзин на сайтах электронной коммерции
Хранилище на стороне клиента также позволяет веб-приложениям реализовать архитектуру, ориентированную на конфиденциальность. С его помощью можно гарантировать, что конфиденциальные данные никогда не покинут устройство пользователя
Что такое хранилище на стороне клиента?
В веб-разработке хранение данных на стороне клиента относится к различным способам хранения данных в веб-браузерах. Затем приложение может использовать эти данные для предоставления функциональности пользователям. Хранилище на стороне клиента очень важно по нескольким причинам:
- Доступ к данным, хранящимся на клиенте, значительно быстрее, и ваше приложение может получить доступ к ним без Интернета.
- Хранение данных на стороне клиента позволяет вашему приложению легче запоминать предпочтения каждого пользователя.
- Постоянное хранение некоторых данных на клиенте облегчает защиту конфиденциальности пользователя.
- Хранение всех данных приложения на сервере дорого, особенно в больших масштабах.
Существует несколько различных форм хранения данных на стороне клиента, которые вы можете использовать в своих веб-приложениях
Cookies
Cookie браузера – это часть данных ключ/значение, хранящаяся в виде строки на вашем компьютере. Браузеры отправляют все файлы cookie для определенного сайта на сервер сайта при каждом запросе.Cookies были первым (и некоторое время единственным) типом хранения данных на стороне клиента
Официального ограничения на размер файла cookie не существует, но отдельные браузеры устанавливают различные ограничения на размер и количество файлов cookie, которые вы можете установить. В разделе 6. 1 RFC 6265 говорится о следующих минимальных возможностях cookie, которые должны предоставлять браузеры (агенты пользователей):
Практические реализации агентов пользователя имеют ограничения на количество и размер файлов cookie, которые они могут хранить. Пользовательские агенты общего назначения ДОЛЖНЫ предоставлять каждую из следующих минимальных возможностей:
- Не менее 4096 байт на куки (измеряется суммой длины имени, значения и атрибутов куки).
- Не менее 50 файлов cookie на домен.
- Всего не менее 3000 файлов cookie.
Файлы cookie могут оставаться в браузере в течение разного времени. Некоторые из них истекают в конце сеанса работы со страницей, а некоторые имеют произвольные сроки действия, которые могут растягиваться на месяцы вперед
Браузеры создают сессию страницы при открытии новой вкладки и завершают ее, когда вы закрываете вкладку или браузер. Если вы перезагрузите или обновите страницу, браузер не завершит сеанс работы со страницей
Случаи использования файлов cookie
Cookies лучше всего подходят для хранения небольших фрагментов данных, которые серверу часто требуется прочитать или изменить. Почему?
- Cookies автоматически присоединяются ко всем сетевым запросам.
- Cookies могут хранить только небольшие объемы строковых данных.
Файлы cookie можно использовать для идентификации пользователя (например, идентификатор сеанса), записи посещения страницы для создания закладок или сохранения высокого результата в игре
LocalStorage
Как и cookie, localStorage – это хранилище ключей/значений, в котором хранятся строковые данные. Хотя оба типа хранилищ похожи, localStorage и cookie различаются по нескольким признакам:
- LocalStorage зависит от JavaScript.
- Данные в localStorage хранятся в основном в браузере. Вы должны намеренно отправлять их на сервер, вместо того чтобы браузер отправлял их при каждом запросе.
- LocalStorage не имеет срока годности. Он сохраняется на клиенте до тех пор, пока разработчик не удалит его с помощью JavaScript или пользователь не очистит хранилище браузера.
- LocalStorage имеет гораздо больший объем памяти. В спецификации WHATWG не указано жесткое ограничение, но, согласно Википедии, минимальный размер localStorage в основных браузерах составляет 5 МБ:
Браузеры ограничивают размер файлов cookie до 4 килобайт. Веб-хранилище обеспечивает гораздо большую емкость:
- Opera 10. 50+ позволяет хранить 5 МБ.
- Safari 8 разрешает 5 МБ.
- Firefox 34 разрешает 10 МБ.
- Google Chrome разрешает 10 МБ на источник.
- Internet Explorer разрешает 10 МБ на область хранения.
Примеры использования LocalStorage
LocalStorage идеально подходит для хранения большого количества данных, к которым серверу редко приходится обращаться. Это могут быть пользовательские настройки приложения, детали конфигурации темы или данные в недавно заполненной форме. Это объясняется тем, что localStorage имеет гораздо больший лимит хранения, чем cookies, но вам нужно приложить дополнительные усилия, чтобы отправить его данные на сервер
Если вы храните данные в формате JSON, вы можете хранить достаточно сложные данные с помощью localStorage, несмотря на то, что он может хранить только строки
LocalStorage уязвим для XSS-атак, поэтому не стоит хранить в нем конфиденциальные данные клиента
SessionStorage
SessionStorage – это хранилище ключей/значений, которое работает почти так же, как и localStorage, за исключением одного момента. Хранимые данные сохраняются только в течение сессии страницы
Примеры использования SessionStorage
Вы можете использовать SessionStorage для хранения данных того же типа, что и localStorage, но только в том случае, если данные не должны сохраняться после сеанса работы со страницей
IndexedDB
IndexedDB – это мощный API браузера для хранения больших объемов структурированных данных. Это транзакционная объектно-ориентированная база данных, которая хранит данные в парах ключ/значение
Если вы имеете дело с небольшими объемами данных, то локальное хранилище/хранилище сессий – лучший и более простой выбор. К сожалению, они ограничены объемом памяти и тем, что могут хранить только строковые данные.IndexedDB не только позволяет хранить различные типы данных, включая файлы/бинарные данные, но и может хранить гораздо больше данных.IndexedDB также строит индексы своего содержимого, чтобы обеспечить быстрый поиск в базе данных
Примеры использования IndexedDB
IndexedDB – это по сути база данных NoSQL в браузере, и она может хранить очень большие объемы данных. Любой случай использования, требующий хранения более 10 МБ данных, подходит для IndexedDB
В отличие от других форм хранения данных в браузере, IndexedDB не ограничивается хранением строк.IndexedDB может хранить данные всех стандартных типов JavaScript. Если вы создаете веб-приложение для работы преимущественно в автономном режиме, вы можете использовать IndexedDB для хранения всех данных приложения
Хранилище на стороне клиента – гибкое и мощное
Термин ‘хранилище на стороне клиента’ означает хранение данных приложения в браузере. Хранилище на стороне клиента необходимо для функционирования большинства современных веб-приложений. Существуют различные типы хранилищ на стороне клиента: cookies, local/sessionStorage и IndexedDB
Все типы хранилищ браузера имеют различные ограничения по емкости и типу данных, которые они могут хранить.Cookies – самый ограниченный тип, local/sessionStorage – самый удобный, а IndexedDB – самый мощный
Комментировать