Какие хранилища данных на фронте важны на практике и как их применять?

Важные фронтенд-хранилища: localStorage, sessionStorage, cookie и IndexedDB. Их применяют под разные задачи по объёму, сроку жизни и доступу сервера.

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

localStorage

~5–10 МБ, бессрочно, только клиент, синхронный. Строки (объекты через JSON).

localStorage.setItem('theme', 'dark');

Для: настройки, черновики, простой кеш.

sessionStorage

~5 МБ, живёт на время вкладки, изолирован для неё. API как у localStorage.

Для: временное состояние вкладки (шаги формы).

Cookie

~4 КБ, автоматически шлётся на сервер, флаги HttpOnly/Secure/SameSite.

Для: сессии, авторизация, серверная персонализация.

IndexedDB

Большие объёмы, асинхронный, структурированные данные, индексы, транзакции.

Для: офлайн (PWA), кеш больших наборов, файлы.

Как выбирать

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

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

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

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

Фронтенд-хранилища: localStorage (долгое, ~5–10 МБ, клиент), sessionStorage (на вкладку), cookie (сессии/авторизация, шлётся на сервер, HttpOnly), IndexedDB (большие структурированные данные, офлайн). Выбор — по объёму, сроку, доступу сервера. Секреты не в localStorage.