How Browsers Store Data

Браузери роблять більше, ніж просто показують вебсайти. Вони діють як локальні менеджери даних. Вони зберігають інформацію на вашому пристрої, щоб зробити перегляд вебсторінок швидшим і зручнішим.

Вам варто знати три основні способи, якими браузери зберігають дані:

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

Cookies Cookies — це невеликі текстові файли. Вебсайти використовують їх, щоб «впізнавати» вас. Вони зберігають інформацію про ваші сесії входу та налаштування мови.

Як вони працюють:

  • Ви відвідуєте сайт.
  • Сайт надсилає cookie вашому браузеру.
  • Ваш браузер зберігає його.
  • Під час наступного візиту ваш браузер надсилає цей cookie назад на сервер.

Майте на увазі:

  • Cookies мають дуже обмежений обсяг — лише 4 КБ.
  • Вони надсилаються з кожним запитом, що може сповільнювати роботу.
  • Ніколи не зберігайте паролі в cookies.

Browser Cache Кеш зберігає «важкі» файли, такі як зображення, CSS та JavaScript. Його мета — швидкість.

Як це працює:

  • Ви вперше відвідуєте сайт.
  • Ваш браузер завантажує всі файли та зберігає їх у кеші.
  • Наступного разу, коли ви відвідаєте сайт, браузер завантажуватиме файли з вашого пристрою, а не з інтернету.

Переваги:

  • Сторінки завантажуються набагато швидше.
  • Використовується менше інтернет-трафіку.
  • Це зменшує навантаження на сервер.

Web Storage Це функція HTML5. Вона дозволяє сайтам зберігати дані у вигляді пар «ключ-значення». Вона ефективніша за cookies, оскільки дані не надсилаються на сервер із кожним запитом.

Існує два типи:

  • Local Storage: Дані залишаються навіть після закриття браузера. Обсяг становить приблизно від 5 МБ до 10 МБ.
  • Session Storage: Дані зникають, коли ви закриваєте вкладку.

Приклади використання:

  • Local storage чудово підходить для налаштувань темної теми.
  • Session storage добре працює для тимчасових даних у формах.

Summary

  • Використовуйте Cookies для сесій входу та взаємодії з сервером.
  • Використовуйте кеш для прискорення завантаження сайту за допомогою статичних ресурсів.
  • Використовуйте Web Storage для більших обсягів даних на стороні клієнта.

Source: https://dev.to/dailycodetools/how-browser-stores-data-cookies-cache-storage-25-jun-0346-m7h