LocalStorage и SessionStorage: как работают
LocalStorage и SessionStorage — часть Web Storage API, появившегося в HTML5. Оба хранилища работают по принципу «ключ–значение» и доступны только через JavaScript на стороне браузера.
// Запись
localStorage.setItem('userId', 'anon_a3f7c2');
localStorage.setItem('recentlyViewed', JSON.stringify([101, 205, 98]));
// Чтение
const userId = localStorage.getItem('userId');
const viewed = JSON.parse(localStorage.getItem('recentlyViewed'));
// Удаление
localStorage.removeItem('recentlyViewed');
SessionStorage работает аналогично, но данные живут только до закрытия вкладки.
Сравнение механизмов хранения
| Параметр | LocalStorage | SessionStorage | Cookie |
|---|---|---|---|
| Срок хранения | До явного удаления | До закрытия вкладки | Настраивается |
| Отправка на сервер | Нет | Нет | Автоматически |
| Лимит | 5–10 МБ | 5–10 МБ | 4 КБ |
| Доступ из JS | Да | Да | Да (без HttpOnly) |
| Защита от XSS | Нет | Нет | HttpOnly-флаг |
Применение в e-commerce
LocalStorage — удобный инструмент для клиентского кэша пользовательских данных, которые не нужно передавать на сервер при каждом запросе:
- Недавно просмотренные товары — быстрый рендер блока без серверного запроса
- Анонимный идентификатор — для персонализации до момента авторизации
- Параметры фильтрации — чтобы пользователь не терял настройки при перезагрузке
- Черновик корзины — резервная копия на случай сбоя сессии
Совет: при персонализации для неавторизованных пользователей храните анонимный ID в LocalStorage. При авторизации — слейте анонимную историю с профилем через Identity Resolution.
Ограничения и проблемы безопасности
LocalStorage уязвим к XSS: любой внедрённый скрипт читает всё содержимое. Не используйте его для хранения чувствительных данных — токенов, личных данных пользователя. Для таких целей подходят HttpOnly-куки или серверные сессии.
Второе ограничение — объём: 5–10 МБ. Для хранения больших структур данных (расширенной истории просмотров, офлайн-каталога) нужен IndexedDB.