В чём отличие куки от localStorage?

Основное различие

Cookie и localStorage — это два разных механизма хранения данных на стороне клиента. Cookie были созданы для передачи состояния между HTTP-запросами, поэтому они автоматически включаются в заголовок Cookie каждого запроса к домену. localStorage появился позже как часть HTML5 Web Storage API и предназначен для хранения данных, которые не нужно отправлять на сервер.

Ключевые отличия

• Размер: cookie ограничены примерно 4KB, localStorage — 5-10MB в зависимости от браузера.
• Срок жизни: cookie могут иметь срок действия (Expires/Max-Age) или быть сессионными; localStorage хранится бессрочно, пока пользователь не очистит данные.
• Отправка на сервер: cookie автоматически отправляются с каждым запросом, что увеличивает трафик; localStorage не отправляется.
• Доступность: cookie доступны как на клиенте (JavaScript), так и на сервере; localStorage — только на клиенте.
• Безопасность: cookie могут быть помечены как HttpOnly (недоступны для JavaScript), localStorage всегда доступен через JS, что делает его уязвимым для XSS-атак.

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

// Установка cookie
document.cookie = 'user=John; max-age=3600; path=/';

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

// Установка localStorage
localStorage.setItem('theme', 'dark');

// Чтение localStorage
const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

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

Когда что использовать

Cookie стоит использовать для аутентификации, отслеживания сессий и хранения небольших данных, которые должны быть доступны серверу. localStorage подходит для хранения пользовательских настроек, кэширования данных и любых данных, которые не нужно передавать на сервер. Например, если вы сохраняете тему оформления или корзину покупок, localStorage будет лучшим выбором, так как не создаёт лишней нагрузки на сеть.

Вывод: Выбирайте cookie, когда данные должны быть доступны серверу или имеют короткий срок жизни; используйте localStorage для долгосрочного хранения на клиенте, чтобы уменьшить сетевой трафик и повысить производительность.