Как можно хранить данные на клиенте в браузере? Какие типы хранения существуют и чем они отличаются?

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

1. Cookies

   • Хранят небольшие объемы данных (до 4 КБ).
   • Отправляются на сервер с каждым HTTP-запросом.
   • Используются для сессий, аутентификации.
   • Имеют срок жизни и могут быть защищены флагами (HttpOnly, Secure).

2. LocalStorage

   • Хранит данные в виде пар ключ-значение.
   • Объем обычно до 5-10 МБ.
   • Данные сохраняются без срока действия, пока не будут удалены вручную.
   • Доступен только на стороне клиента, не отправляется на сервер автоматически.

3. SessionStorage

   • Похож на LocalStorage, но данные живут только в рамках одной сессии (вкладки).
   • После закрытия вкладки данные удаляются.

4. IndexedDB

   • Более сложное, асинхронное хранилище для структурированных данных.
   • Позволяет хранить большие объемы данных.
   • Поддерживает индексы, транзакции.

5. Cache Storage (Cache API)

   • Используется для хранения ответов HTTP-запросов.
   • Позволяет создавать офлайн-приложения.

Отличия:

• Cookies отправляются на сервер с каждым запросом, остальные — только на клиенте.
• LocalStorage и SessionStorage просты, но ограничены по объему и типам данных.
• IndexedDB подходит для сложных и больших данных.
• SessionStorage ограничен сессией, LocalStorage — постоянен.

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

localStorage.setItem('username', 'Ivan');
const user = localStorage.getItem('username');