Хранилище на стороне клиента необходимо для веб-приложений. Возможно, оно не такое надежное, как хранилище на стороне сервера, но без него веб-приложения не смогут реализовать многие современные функции. Все виды функций зависят от хранилища на стороне клиента, от сеансов в играх до корзин покупок на веб-сайтах электронной коммерции.
Хранилище на стороне клиента также позволяет веб-приложениям реализовывать архитектуру, ориентированную на конфиденциальность. Вы можете использовать его, чтобы гарантировать, что конфиденциальные данные никогда не покинут устройство пользователя.
Что такое хранилище на стороне клиента?
В веб-разработке хранилище на стороне клиента относится к различным способам, которыми веб-браузеры могут хранить данные. Затем приложение может использовать эти данные для предоставления функций пользователям. Хранилище на стороне клиента имеет решающее значение по нескольким причинам:
- Доступ к данным, хранящимся на клиенте, значительно быстрее, и ваше приложение может получить к ним доступ без Интернета.
- Хранилище на стороне клиента облегчает вашему приложению запоминание предпочтений каждого пользователя.
- Постоянное хранение некоторых данных на клиенте упрощает защиту конфиденциальности пользователей.
- Хранение всех данных приложения на сервере стоит дорого, особенно в больших масштабах.
Существует несколько различных форм хранилища на стороне клиента, которые вы можете использовать в своих веб-приложениях.
Печенье
Файл cookie браузера — это фрагмент данных типа «ключ-значение», хранящийся в виде строки на вашем компьютере. Браузеры отправляют все файлы cookie для определенного сайта на сервер сайта при каждом запросе. Файлы cookie были первым (и какое-то время единственным) типом клиентского хранилища.
Официальных ограничений на размер файла cookie нет, но отдельные браузеры устанавливают различные ограничения на размер и количество файлов cookie, которые вы можете установить. RFC 6265, раздел 6.1 заявляет, что браузеры (пользовательские агенты) должны предоставлять следующие минимальные возможности файлов cookie:
Практические реализации пользовательских агентов имеют ограничения на количество и размер файлов cookie, которые они могут хранить. Пользовательским агентам общего назначения СЛЕДУЕТ предоставлять каждую из следующих минимальных возможностей:
- Не менее 4096 байт на файл cookie (измеряется как сумма длины имени, значения и атрибутов файла cookie).
- Не менее 50 файлов cookie на домен.
- Всего не менее 3000 файлов cookie.
Файлы cookie могут оставаться в браузере в течение разного времени. Некоторые из них истекают в конце сеанса страницы, а некоторые имеют произвольные даты истечения срока действия, которые могут растянуться на несколько месяцев в будущем.
Браузеры создают сеанс страницы, когда вы открываете новую вкладку, и завершают его, когда вы закрываете вкладку или браузер. Если вы перезагрузите или обновите страницу, браузер не завершит сеанс страницы.
Примеры использования файлов cookie
Файлы cookie лучше всего подходят для хранения небольших фрагментов данных, которые серверу часто требуется читать или изменять. Почему?
- Файлы cookie автоматически добавляются ко всем сетевым запросам.
- Файлы cookie могут хранить только небольшие объемы строковых данных.
Вы можете использовать файлы cookie для идентификации пользователя (например, идентификатора сеанса), записи посещения страницы для создания закладок или сохранения рекордов игры.
Локальное хранилище
Как и файл 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 имеет гораздо больший предел хранения, чем файлы cookie, но вам нужно приложить дополнительные усилия, чтобы отправить его данные на сервер.
Если вы храните данные в формате JSON, вы можете хранить достаточно сложные данные с помощью localStorage, даже если он может хранить только строки.
LocalStorage уязвим для XSS-атаки, поэтому вы не должны хранить в нем конфиденциальные данные клиентов.
SessionStorage
SessionStorage — это хранилище ключей/значений, которое работает почти так же, как localStorage, за исключением одного. Сохраненные данные сохраняются только на время сеанса страницы.
Примеры использования SessionStorage
Вы можете использовать SessionStorage для хранения данных того же типа, что и localStorage, но только в том случае, если данные не должны сохраняться после сеанса страницы.
ИндекседБД
IndexedDB — это мощный API браузера для хранения больших объемов структурированных данных. Это транзакционная объектно-ориентированная база данных, которая хранит данные в парах ключ/значение.
Если вы имеете дело с небольшими объемами данных, localStorage/sessionStorage — лучший и простой выбор. К сожалению, они ограничены емкостью хранилища и тем фактом, что могут хранить только строковые данные. IndexedDB не только позволяет хранить различные типы данных, включая файлы/двоичные данные, но также может хранить гораздо больше данных. IndexedDB также создает индексы своего содержимого, чтобы обеспечить быстрый поиск в базе данных.
Примеры использования IndexedDB
IndexedDB — это, по сути, база данных NoSQL в браузере, которая может хранить очень большие объемы данных. Любой вариант использования, требующий хранения более 10 МБ данных, подходит для IndexedDB.
В отличие от других форм хранения браузера, IndexedDB не ограничивается хранением строк. IndexedDB может хранить данные всех стандартных типов JavaScript. Если вы создаете веб-приложение для работы в основном в автономном режиме, вы можете использовать IndexedDB для хранения всех данных приложения.
Хранилище на стороне клиента гибкое и мощное
Термин хранилище на стороне клиента относится к хранению данных приложения в браузере. Хранилище на стороне клиента необходимо для работы большинства современных веб-приложений. Существуют различные типы хранилища на стороне клиента: файлы cookie, локальное/сеансовое хранилище и IndexedDB.
Все типы хранилищ браузера имеют различные ограничения на их емкость и тип данных, которые они могут хранить. Файлы cookie являются наиболее ограниченным типом, local/sessionStorage — наиболее удобным, а IndexedDB — наиболее мощным.
