В чем разница между cookie и localStorage

cookie:

• Передаются на сервер с каждым HTTP-запросом (заголовки Cookie и Set-Cookie).
• Имеют ограниченный размер (~4KB).
• Можно установить срок действия (expires, max-age).
• Доступны как на клиенте (document.cookie), так и на сервере.
• Используются для аутентификации, сессий, трекинга.

localStorage:

• Хранит данные только на клиенте (не отправляются на сервер автоматически).
• Объем ~5-10MB (зависит от браузера).
• Данные сохраняются навсегда, пока их не удалят вручную или через JS.
• Доступ только через JS (localStorage.setItem(), localStorage.getItem()).
• Используется для кеширования данных, настроек приложения.

Пример:

// cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC";

// localStorage
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // 'dark'