Отличия куки от session storage?

Question

Куки:Малый размер (~4 КБ на домен).Автоматически отправляются на сервер с каждым HTTP-запросом.Могут быть постоянными (срок истекает вручную) или сессионными (до закрытия браузера).Используются для авторизации, трекинга.Session Storage:Больший размер (~5 МБ на домен).Данные доступны только в текущей вкладке и удаляются после её закрытия.Не отправляются на сервер автоматически.Используются для временных данных (например, сохранение формы).

YeaHub · Accepted Answer

Время жизниКуки:Если указан параметр expires или max-age, куки сохраняются даже после закрытия браузера.Без них – удаляются при завершении сессии (но поведение зависит от браузера).// Кука с сроком годности (удалится через 7 дней)
document.cookie = "token=abc123; max-age=604800; path=/";Session Storage:Данные живут только пока открыта вкладка. При её закрытии – очищаются.Объём данныхКуки:Ограничение ~4 КБ на весь домен (все куки суммарно).Переполнение приводит к потере старых кук.Session Storage:До ~5 МБ на домен (зависит от браузера).Можно хранить сложные данные (например, JSON-объекты).ДоступностьКуки:Автоматически прикрепляются к каждому HTTP-запросу в заголовке Cookie.Сервер может читать/изменять их через Set-Cookie.// HTTP-заголовок от сервера
Set-Cookie: sessionId=xyz; Secure; HttpOnlySession Storage:Доступен только через JavaScript на клиенте.Не отправляется на сервер без явного указания (например, через fetch).ИспользованиеКогда выбирать куки:Для аутентификации (JWT, сессионные ID).Для трекинга (аналитика, персонализация).// Пример чтения кук
console.log(document.cookie); // "token=abc123; theme=dark"Когда выбирать sessionStorage:Временные данные в рамках одной вкладки (например, сохранение формы перед отправкой).Кэширование тяжёлых данных, чтобы избежать повторных вычислений.// Сохранение объекта
sessionStorage.setItem('formData', JSON.stringify({ name: 'Alice', age: 25 }));
// Чтение
const data = JSON.parse(sessionStorage.getItem('formData'));БезопасностьКуки:Уязвимы к CSRF-атакам (если нет SameSite и HttpOnly).Можно защитить:document.cookie = "auth=secret; Secure; HttpOnly; SameSite=Strict";Session Storage:Не уязвим к CSRF (так как не отправляется автоматически).Но уязвим к XSS (если злоумышленник выполнит чужой JS-код).