Какие хранилища в браузере важны на практике и как их применять?

На практике применяют cookie, localStorage, sessionStorage и IndexedDB — под разные задачи хранения на клиенте.

Хранилища и их применение

Cookie

Небольшие данные (~4 КБ), автоматически шлются на сервер. Применение: сессии, авторизация (HttpOnly), серверные метки.

localStorage

~5–10 МБ, бессрочно, только клиент. Применение: тема, язык, черновики, простой кеш.

localStorage.setItem('settings', JSON.stringify(settings));

sessionStorage

~5 МБ, живёт на время вкладки. Применение: состояние многошаговой формы, временный контекст.

IndexedDB

Большие объёмы, асинхронный API, структурированные данные и индексы. Применение: офлайн-приложения, кеш больших наборов, PWA.

Как выбирать на практике

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

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

Токены — в память или HttpOnly-cookie, не в localStorage (XSS).

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

На практике: cookie — авторизация и серверные метки; localStorage — долгие клиентские настройки; sessionStorage — временное на вкладку; IndexedDB — большие структурированные данные и офлайн. Выбор по объёму, сроку жизни и доступу сервера.