В веб-разработке у браузера есть несколько способов хранить данные на стороне клиента. Частый вопрос: что выбрать — LocalStorage, SessionStorage или IndexedDB? Разница между ними не только в объёме, но и в сценариях использования.
1. LocalStorage
Подходит для простых данных, которые должны сохраняться между сессиями браузера.
- хранит данные бессрочно, пока пользователь не очистит браузер
- работает в формате ключ-значение
- сохраняет только строки
- объём обычно около 5–10 МБ
- API очень простое
Когда использовать:
- тема сайта: light/dark mode
- язык интерфейса
- токены, не требующие повышенной безопасности
- настройки пользователя
- небольшие кэши
Важно: LocalStorage синхронный, поэтому при большом объёме данных может тормозить интерфейс.
2. SessionStorage
Похож на LocalStorage, но живёт только в рамках одной вкладки или окна.
- данные удаляются после закрытия вкладки
- доступен только в текущей сессии
- тоже хранит данные как строки
- удобен для временного состояния
Когда использовать:
- данные многошаговой формы
- временный фильтр каталога
- состояние страницы до перезагрузки
- одноразовые данные в рамках сессии
SessionStorage полезен, когда информацию не нужно хранить надолго.
3. IndexedDB
Это уже не просто хранилище, а встроенная браузерная NoSQL-база данных. Подходит для больших и сложных данных. 🚀
- хранит большие объёмы данных
- поддерживает объекты, массивы, бинарные файлы
- работает асинхронно
- можно создавать индексы и выполнять поиск
- подходит для offline-first приложений
Когда использовать:
- PWA и офлайн-приложения
- кеширование API-ответов
- хранение изображений, файлов, черновиков
- локальная база товаров, сообщений, заметок
- сложные клиентские приложения
Минус: IndexedDB сложнее в работе, чем LocalStorage и SessionStorage.
Как выбрать 🧩
- LocalStorage — если данные маленькие, простые и должны переживать перезапуск браузера
- SessionStorage — если данные нужны только до закрытия вкладки
- IndexedDB — если данных много, они сложные или нужен офлайн-режим
Короткое правило:
- до 10 МБ и без сложной логики — LocalStorage / SessionStorage
- много данных, поиск, офлайн, объекты — IndexedDB
Что важно по безопасности 🔐
Ни одно из этих хранилищ не подходит для действительно чувствительных данных, если на сайте возможны XSS-уязвимости. JavaScript в браузере может получить к ним доступ. Поэтому пароли и критически важные секреты там хранить нельзя.
Итог:
LocalStorage — для постоянных мелких настроек,
SessionStorage — для временного состояния,
IndexedDB — для серьёзного клиентского хранения данных. ✅
📌 Ещё больше полезных материалов — в подборке каналов про IT.