Сравни способы хранения данных в браузере и объясни, когда выбирать каждый вариант.

В браузере есть несколько хранилищ данных — cookie, localStorage, sessionStorage (и IndexedDB), — и выбор зависит от объёма, срока жизни и того, нужны ли данные серверу.

Сравнение

• Cookie — до ~4 КБ, автоматически шлётся на сервер с каждым запросом, срок жизни настраивается, можно HttpOnly. Для сессий и авторизации.
• localStorage — ~5–10 МБ, живёт бессрочно, только на клиенте, общий для вкладок origin. Для настроек и долгих клиентских данных.
• sessionStorage — ~5 МБ, живёт пока открыта вкладка, только клиент. Для временного состояния вкладки.
• IndexedDB — большие объёмы (сотни МБ), асинхронное API, структурированные данные. Для офлайна и кеша.

localStorage.setItem('theme', 'dark');
sessionStorage.setItem('step', '2');
document.cookie = 'sid=abc; secure; samesite=lax';

Как выбирать

• Нужно серверу / авторизация → cookie (лучше HttpOnly).
• Долгие клиентские настройки → localStorage.
• Данные на одну вкладку/сессию → sessionStorage.
• Много структурированных данных, офлайн → IndexedDB.

Безопасность

• Токены доступа лучше держать в памяти или HttpOnly-cookie, а не в localStorage (уязвим к XSS).

Коротко для собеседования

Cookie — маленькие, шлются на сервер, HttpOnly для авторизации. localStorage — большой и постоянный, только клиент. sessionStorage — на вкладку. IndexedDB — большие объёмы и офлайн. Выбор — по объёму, сроку и потребности сервера.