Что такое localStorage, sessionStorage и cookies? Чем они отличаются друг от друга?

localStorage, sessionStorage и cookies — это механизмы хранения данных на стороне клиента в браузере, но они отличаются по объему, времени жизни и способу передачи данных.

• localStorage — хранит данные без срока истечения, пока пользователь не очистит их вручную. Данные доступны только на том же домене. Объем обычно около 5-10 МБ. Не отправляется на сервер с каждым запросом.

• sessionStorage — похож на localStorage, но данные живут только в рамках одной сессии браузера (пока вкладка открыта). После закрытия вкладки данные удаляются. Также ограничен по объему и доступен только на том же домене.

• cookies — маленькие данные (до 4 КБ), которые автоматически отправляются на сервер с каждым HTTP-запросом к соответствующему домену. Можно задать срок жизни, область действия (домен, путь), флаги безопасности (HttpOnly, Secure). Используются для аутентификации, отслеживания сессий.

Ключевые отличия:

• Объем: cookies < localStorage/sessionStorage
• Время жизни: cookies — настраиваемое, localStorage — постоянное, sessionStorage — до закрытия вкладки
• Передача на сервер: cookies отправляются автоматически, localStorage и sessionStorage — нет

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

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