Веб-приложениям часто нужно сохранять состояние. Выбор механизма хранения влияет на безопасность, объем данных и поведение при перезагрузке.
LocalStorage и SessionStorage
Это хранилища ключ-значение, доступные через JS.
- LocalStorage: Данные живут вечно, пока не будут удалены скриптом или пользователем. Объем ~5-10 Мб.
- SessionStorage: Данные живут только в рамках вкладки. При закрытии вкладки удаляются.
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
// Важно: хранит только строки!
const user = { id: 1 };
localStorage.setItem('user', JSON.stringify(user));
Безопасность: Данные видны любому скрипту на странице. Никогда не храните там токены авторизации или чувствительные данные, так как это уязвимо для XSS-атак.
Cookies
Cookies отправляются на сервер с каждым запросом. Объем ограничен (4 Кб).
- HttpOnly: Флаг, запрещающий доступ через JS (
document.cookie). Обязательно для сессионных токенов. - Secure: Отправка только по HTTPS.
- SameSite: Защита от CSRF-атак.
Для аутентификации используйте Cookies с флагом HttpOnly. Для настроек интерфейса (тема, язык) подходит LocalStorage.
IndexedDB
Для больших объемов структурированных данных (кэширование API, офлайн-режим) используйте IndexedDB. Это полноценная база данных в браузере. Работать с ней сложнее (асинхронный API), но для PWA это незаменимый инструмент. Библиотеки вроде idb упрощают работу с ней.