В чем разница между cookie, localStorage и sessionStorage?

`cookie`, `localStorage` и `sessionStorage` — три способа хранить данные в браузере, различающиеся объёмом, временем жизни и отправкой на сервер.

Cookie

• Объём: ~4 КБ на cookie.
• Время жизни: задаётся через Expires / Max-Age; сессионные удаляются при закрытии браузера.
• Автоматически отправляются на сервер с каждым HTTP-запросом к домену.
• Настройки безопасности: HttpOnly (недоступна из JS), Secure, SameSite.
• Применение: сессии, аутентификация, серверные метки.

localStorage

• Объём: ~5–10 МБ.
• Время жизни: бессрочно, пока не удалят вручную.
• На сервер не отправляется, доступен только из JS.
• Общий для всех вкладок одного origin.
• Применение: настройки темы, черновики, кеш на клиенте.

sessionStorage

• Объём: ~5 МБ.
• Время жизни: только пока открыта вкладка; у каждой вкладки своё хранилище.
• На сервер не отправляется.
• Применение: временное состояние одной сессии/вкладки (шаги формы).

localStorage.setItem('theme', 'dark');
localStorage.getItem('theme'); // 'dark'
sessionStorage.setItem('step', '2');
document.cookie = 'token=abc; max-age=3600; secure; samesite=lax';

Как выбирать

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

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

Cookie — маленькие, шлются на сервер, можно HttpOnly. localStorage — большой и постоянный, только клиент. sessionStorage — как localStorage, но живёт только пока открыта вкладка.