Чем куки отличаются от localStorage? Какой максимальный размер у куки и у localStorage? Чем отличается их время жизни?

Основные различия между куки и localStorage

Куки (cookies) и localStorage — это два разных механизма хранения данных на стороне клиента в веб-браузере. Они отличаются по размеру, времени жизни, способу передачи данных и области применения.

Размер хранилища

Куки имеют ограничение в 4 КБ на одно доменное имя. Это очень мало, поэтому куки обычно используются для хранения идентификаторов сессий или небольших токенов. localStorage, напротив, может хранить от 5 до 10 МБ (в зависимости от браузера), что позволяет сохранять более объёмные данные, такие как настройки пользователя или кэш.

Время жизни

Куки могут быть сессионными (удаляются при закрытии браузера) или постоянными (срок жизни задаётся через атрибуты Expires или Max-Age). localStorage не имеет срока жизни — данные хранятся до тех пор, пока их не удалит пользователь или JavaScript (метод localStorage.clear()).

Передача на сервер

Куки автоматически отправляются на сервер с каждым HTTP-запросом (если не установлен флаг HttpOnly). Это удобно для аутентификации, но увеличивает размер запросов. localStorage не передаётся на сервер автоматически — данные доступны только в браузере, что снижает нагрузку на сеть.

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

// Установка куки с сроком жизни 7 дней
document.cookie = "token=abc123; max-age=604800; path=/";

// Чтение куки
console.log(document.cookie);

// Запись в localStorage
localStorage.setItem("theme", "dark");

// Чтение из localStorage
console.log(localStorage.getItem("theme"));

// Удаление из localStorage
localStorage.removeItem("theme");

Вывод

Куки лучше использовать для данных, которые должны автоматически передаваться на сервер (например, идентификатор сессии), а localStorage — для хранения больших объёмов данных на клиенте, которые не нужно отправлять на сервер (например, настройки интерфейса). Выбор зависит от задачи: если нужна автоматическая синхронизация с сервером — куки, если только клиентское хранение — localStorage.