Что хотят услышать интервьюеры:

LocalStorage и SessionStorage — это клиентское хранилище ключ-значение в браузере, а cookies — более старый механизм с автоматической отправкой на сервер. Основные отличия — в сроке жизни, объёме, доступности для JS и участии в HTTP-запросах. Важно понимать, что для сессии, кэша и токенов механизмы выбирают по разным ограничениям безопасности и удобства.

Определение:

LocalStorage хранит данные долго, пока их явно не удалить; данные доступны только в рамках одного origin и не отправляются на сервер автоматически.

SessionStorage похож на LocalStorage, но живёт только в пределах одной вкладки/сессии браузера и очищается после закрытия вкладки или окна.

Cookies — это небольшие пары ключ-значение, которые браузер может автоматически прикладывать к HTTP-запросам к соответствующему домену и пути. У cookies есть дополнительные атрибуты: срок жизни, Secure, HttpOnly, SameSite, Domain, Path.

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

LocalStorage: сохранение темы интерфейса, языка, настроек фильтров.
SessionStorage: временные данные формы, шаги мастера, черновик для одной вкладки.
Cookies: идентификатор сессии пользователя, CSRF-токен, данные, которые должны уходить на сервер вместе с запросом.

// LocalStorage
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');

// SessionStorage
sessionStorage.setItem('step', '2');
const step = sessionStorage.getItem('step');

// Cookies
document.cookie = 'sessionId=abc123; Path=/; Secure; SameSite=Lax';

Пояснение кода:

localStorage.setItem('theme', 'dark') сохраняет значение dark в постоянное хранилище браузера.
localStorage.getItem('theme') читает сохранённое значение даже после перезапуска браузера.
sessionStorage.setItem('step', '2') сохраняет данные только для текущей вкладки.
document.cookie = ... создаёт cookie; браузер будет отправлять её на сервер по подходящим запросам, если это разрешают атрибуты.
Path=/ делает cookie доступной для всего сайта.
Secure означает отправку только по HTTPS.
SameSite=Lax уменьшает риск CSRF в типовых сценариях.

Ключевые моменты:

LocalStorage: долгоживущий, до ~5–10 MB в зависимости от браузера, не отправляется на сервер автоматически.
SessionStorage: живёт только в рамках вкладки, объём обычно сопоставим с LocalStorage, тоже не отправляется на сервер автоматически.
Cookies: маленькие по размеру, автоматически участвуют в HTTP-запросах, поэтому подходят для сессий, но увеличивают сетевой трафик.
Для чувствительных данных лучше использовать HttpOnly + Secure + SameSite cookies, а не хранить их в localStorage.
localStorage и sessionStorage доступны из JavaScript, значит уязвимы при XSS, если в них хранится секрет.
Cookies удобны, когда серверу нужно видеть данные без отдельной логики чтения на клиенте.

Чем отличаются механизмы хранения данных в LocalStorage, SessionStorage и cookies в браузере?