Ответ
Cookie и localStorage — это механизмы хранения данных на стороне клиента с принципиально разными целями и характеристиками.
Ключевые различия
| Характеристика | Cookie | localStorage |
|---|---|---|
| Объем | До 4 КБ на домен | 5-10 МБ на домен (зависит от браузера) |
| Срок жизни | Может быть сессионным или иметь явный срок (expires/max-age) |
Сохраняется до явного удаления |
| Передача на сервер | Автоматически отправляется с каждым HTTP-запросом (заголовок Cookie) |
Не отправляется автоматически |
| Доступность | Доступен и на клиенте, и на сервере | Только на клиенте через JavaScript |
| API | Примитивный строковый интерфейс | Простой API ключ-значение |
Примеры использования
// Cookie - установка с атрибутами
document.cookie = "session_id=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; Secure; HttpOnly";
// localStorage - простые операции
localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark', language: 'ru' }));
const prefs = JSON.parse(localStorage.getItem('userPreferences'));
localStorage.removeItem('userPreferences');Когда что использовать
Используйте cookie для:
- Аутентификации и сессий (с флагами
HttpOnlyиSecure) - Отслеживания пользователей (с согласия)
- Сохранения небольших настроек, нужных серверу
Используйте localStorage для:
- Кэширования данных приложения на клиенте
- Сохранения пользовательских настроек интерфейса
- Хранения больших объемов данных, не требующих серверной обработки
Важно: Ни cookie, ни localStorage не подходят для хранения чувствительных данных (паролей, токенов платежей) — для этого используйте безопасные серверные сессии или специализированные решения.