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

Куки:

• Если указан параметр 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; HttpOnly

Session 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-код).