Что хранится в Local Storage?

Что хранится в Local Storage?

Local Storage (локальное хранилище) — это часть Web Storage API в современных браузерах, предоставляющая механизм для долговременного хранения данных (в виде пар «ключ-значение») на стороне клиента. В отличие от sessionStorage, данные в Local Storage не имеют срока действия и сохраняются между сессиями браузера (даже после его закрытия и перезапуска), пока они не будут явно удалены скриптом или пользователем (через настройки браузера).

Ключевые характеристики данных в Local Storage

• Формат данных: Данные хранятся исключительно в виде строк (string). Для хранения сложных структур (объектов, массивов) необходимо использовать JSON.stringify() при записи и JSON.parse() при чтении.
• Объём: Ограничение составляет обычно ~5-10 МБ на домен (зависит от браузера). Превышение лимита вызывает исключение QuotaExceededError.
• Доступ: Данные привязаны к протоколу, домену и порту (происхождению, origin). Это означает, что https://example.com не имеет доступа к данным http://example.com или https://subdomain.example.com.
• Синхронный API: Все операции (чтение/запись) являются синхронными, что может блокировать основной поток при работе с большими объёмами данных.

Типичное содержимое Local Storage с точки зрения QA

Как инженер по обеспечению качества, я рассматриваю Local Storage не только как место хранения, но и как критически важный объект для тестирования. Вот что там обычно можно найти:

1. Данные состояния интерфейса (UI State)

• Предпочтения пользователя: тема оформления (тёмная/светлая), свёрнутость/развёрнутость боковых панелей, настройки столбцов таблиц.
• Данные формы, сохранённые для восстановления (autosave), например, черновик письма или длинной анкеты.
• Состояние onboarding-туров или всплывающих подсказок (чтобы не показывать их снова).

// Пример: Сохранение темы
localStorage.setItem('userTheme', 'dark');
// Чтение темы при загрузке
const theme = localStorage.getItem('userTheme') || 'light';
document.body.classList.add(theme + '-theme');

2. Данные аутентификации и сессии

• Токены доступа (Access Token), токены обновления (Refresh Token) — НЕБЕЗОПАСНАЯ ПРАКТИКА. Хранение подобных чувствительных данных в Local Storage делает приложение уязвимым к атакам XSS (Cross-Site Scripting). С точки зрения безопасности, для токенов предпочтительнее использовать HttpOnly куки.
• Информация о профиле пользователя (имя, email в зашифрованном виде), флаги авторизации.

3. Кэшированные данные приложения

• Результаты API-запросов для уменьшения нагрузки на сервер и ускорения начальной загрузки (с обязательным указанием срока актуальности).
• Конфигурации, редко меняющиеся справочники (список стран, валют).

4. Трекинг и аналитика

• Идентификаторы сессий для аналитических систем (например, amplitude_session_id).
• Уникальный идентификатор пользователя (userID), сгенерированный на клиенте.
• Различные экспериментальные флаги (A/B-тесты, feature toggles).

5. Данные для оффлайн-работы (PWA)

• В прогрессивных веб-приложениях (PWA) в Local Storage может храниться состояние, необходимое для работы без подключения к сети, перед последующей синхронизацией с сервером.

Практическое значение для QA Engineer

Понимание содержимого Local Storage критически важно для составления тест-кейсов:

• Тестирование устойчивости: Очистка Local Storage (localStorage.clear()) и проверка, что приложение корректно инициализируется с нуля или показывает соответствующие сообщения.
• Воспроизведение сценариев: Внесение конкретных данных напрямую через консоль браузера для воспроизведения сложных состояний (например, помещённых в корзину товаров, определённых настроек).
• Тестирование безопасности: Проверка на уязвимости к XSS. Если зловредный скрипт может получить доступ к Local Storage и извлечь токены — это критический баг.
• Кросс-браузерное и кросс-девайс тестирование: Убедиться, что данные, записанные в одном браузере (Chrome), не «протекают» в другой (Firefox) на той же машине (что и не должно происходить из-за политики origin).
• Тестирование лимитов: Попытка записать данные, превышающие квоту, и проверка обработки ошибки в приложении.
• Инспекция данных: Использование вкладки Application в Chrome DevTools или Storage в Firefox для ручной проверки, корректности и актуальности хранимых значений во время выполнения функциональных тестов.

// Пример действия QA: Воспроизведение состояния через DevTools Console
// Помещаем товар в "корзину" для тестирования
localStorage.setItem('cart', JSON.stringify([{id: 123, name: 'Телефон', qty: 2}]));
// После этого обновляем страницу и проверяем, отображается ли корзина с 2 товарами.

Вывод

Для разработчика Local Storage — это удобный инструмент для хранения клиентских данных. Для QA Engineer — это важнейший артефакт состояния приложения, объект для инспекции, манипуляции и всесторонней проверки. Понимание его содержимого, лимитов и связанных рисков безопасности позволяет проводить более глубокое и эффективное тестирование веб-приложений, обеспечивая их надёжность, безопасность и предсказуемость работы для конечного пользователя.