Что такое localStorage?

Что такое localStorage

localStorage это браузерное хранилище данных для сохранения информации на клиенте без отправки на сервер.

Основные характеристики

Что это:

• JavaScript API для сохранения данных
• Данные хранятся на компьютере пользователя
• Персистентное хранилище (остаются после закрытия)
• Синхронное

Размер хранилища:

• Обычно 5-10 MB per domain
• Зависит от браузера
• Превышение вызывает ошибку

Scope:

• Отдельно для каждого домена
• HTTPS и HTTP разные
• Разные порты - разные

Как это работает

Сохранение: localStorage.setItem(key, value);

Получение:

var value = localStorage.getItem(key);

Удаление: localStorage.removeItem(key); localStorage.clear();

Практические примеры

Сохранение предпочтений:

• Тема (dark mode)
• Язык интерфейса
• Размер шрифта

Кэширование данных:

• При первом открытии fetch с сервера
• Сохраняю в localStorage
• При следующем открытии, сначала показываю локальные данные
• Потом обновляю с сервера в фоне

Сохранение авторизации:

• После успешной авторизации сохраняю authToken
• При следующем открытии проверяю наличие токена

Черновики форм:

• При заполнении формы сохраняю данные
• Если пользователь закроет браузер, форма восстанавливается

Что тестирует QA

Функциональность:

• Данные сохраняются корректно
• Данные не теряются при закрытии браузера
• Данные удаляются когда нужно
• Очистка кэша удаляет localStorage

Граничные случаи:

• Что происходит когда localStorage заполнен
• Что если JSON слишком большой
• Что если ключ не существует

Security:

• Данные видны в DevTools (риск для sensitive)
• XSS атаки могут украсть данные
• НИКОГДА не сохраняй пароли или токены

Cross-browser:

• Работает во всех современных браузерах
• Private mode может работать по-другому

Как проверяю в DevTools

Chrome DevTools:

1. F12
2. Application
3. Storage -> Local Storage
4. Выбрать домен
5. Видны все ключи и значения

Что проверяю:

• После действия, localStorage содержит правильные данные
• Значения имеют правильный формат
• Нет лишних данных
• Старые данные удаляются

localStorage vs sessionStorage

localStorage:

• Данные остаются после закрытия браузера
• Долгосрочное сохранение

sessionStorage:

• Данные удаляются при закрытии вкладки
• Временные данные

Проблемы

Synchronous API:

• Может заморозить UI с большими данными

Storage Quota:

• Лимит 5-10 MB
• Превышение вызывает ошибку

Security:

• Доступен через JavaScript
• Данные НЕ encrypted
• Не сохраняй sensitive данные

Performance:

• Итерация по большому количеству ключей медленная

Лучшие практики

Используй для:

• Сохранения некритичных данных
• Кэширования
• Preferences
• Структурированных данных как JSON

Не используй для:

• Паролей
• Токенов
• Personal Information
• Security-critical данных

Вывод

localStorage это полезный инструмент для сохранения пользовательских данных в браузере. QA должен понимать что это клиентское хранилище, видно в DevTools и не подходит для sensitive данных. При тестировании нужно проверить правильность сохранения, удаления данных и поведение при превышении лимита размера.