Как браузеры хранят данные

Браузеры делают больше, чем просто показывают веб-сайты. Они работают как локальные менеджеры данных. Они сохраняют информацию на вашем устройстве, чтобы сделать просмотр сайтов быстрее и удобнее.

Вам следует знать три основных способа, которыми браузеры хранят данные:

• Cookies • Кэш браузера • Web Storage

Cookies Cookies — это небольшие текстовые файлы. Веб-сайты используют их, чтобы «узнавать» вас. В них хранятся данные о ваших сессиях входа и настройки языка.

Как они работают:

  • Вы посещаете сайт.
  • Сайт отправляет cookie вашему браузеру.
  • Ваш браузер сохраняет их.
  • При следующем посещении ваш браузер отправляет эти cookie обратно на сервер.

Имейте в виду:

  • У cookies есть очень маленький лимит — 4 КБ.
  • Они отправляются с каждым запросом, что может замедлить работу.
  • Никогда не храните пароли в cookies.

Кэш браузера Кэш хранит «тяжелые» файлы, такие как изображения, CSS и JavaScript. Его цель — скорость.

Как это работает:

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

Преимущества:

  • Страницы загружаются гораздо быстрее.
  • Это экономит интернет-трафик.
  • Это снижает нагрузку на сервер.

Web Storage Это функция HTML5. Она позволяет сайтам хранить данные в виде пар «ключ-значение». Это эффективнее, чем cookies, так как данные не отправляются на сервер с каждым запросом.

Существует два типа:

  • Local Storage: данные сохраняются, даже если вы закроете браузер. Объем составляет от 5 МБ до 10 МБ.
  • Session Storage: данные исчезают при закрытии вкладки.

Примеры использования:

  • Local Storage отлично подходит для настроек темной темы.
  • Session Storage хорошо подходит для временных данных форм.

Резюме

  • Используйте Cookies для сессий входа и взаимодействия с сервером.
  • Используйте кэш для ускорения загрузки сайта с помощью статических ресурсов.
  • Используйте Web Storage для хранения больших объемов данных на стороне клиента.

Источник: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h