В чем разница между localStorage и sessionStorage?

Различия между localStorage и sessionStorage в веб-хранилищах

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

Основные различия

1. Время жизни данных (Lifetime)

• localStorage: Данные сохраняются перманентно и не имеют срока годности. Они остаются в браузере даже после его закрытия и перезапуска компьютера. Удалить данные можно только:

    *   Программно, с помощью JavaScript.
    *   Через очистку данных браузера пользователем.
    *   В режиме инкогнито/приватного просмотра (данные удаляются при закрытии окна).

• sessionStorage: Данные существуют только в течение сеанса одной вкладки/окна браузера. Как только пользователь закрывает вкладку или окно, все данные, связанные с этим сеансом, автоматически удаляются. Обновление страницы (F5) не очищает sessionStorage.

2. Область видимости (Scope)

• localStorage: Данные разделяются между всеми вкладками и окнами одного браузера, открытыми на одном источнике (домен + протокол + порт). Это позволяет синхронизировать состояние приложения между разными вкладками.
• sessionStorage: Данные изолированы для конкретной вкладки. Даже если открыть две вкладки с одним и тем же сайтом, каждая будет иметь свою собственную, независимую копию sessionStorage. Данные из одной вкладки недоступны для другой.

Технические характеристики и API

Оба хранилища имеют идентичный программный интерфейс (API), что упрощает их использование:

// Методы идентичны для обоих типов хранилища
// Сохранение данных
localStorage.setItem('ключ', 'значение');
sessionStorage.setItem('userToken', 'abc123');

// Получение данных
const data = localStorage.getItem('ключ');
const token = sessionStorage.getItem('userToken');

// Удаление конкретного значения
localStorage.removeItem('ключ');

// Полная очистка хранилища
sessionStorage.clear();

// Получение ключа по индексу и количества элементов
const keyName = localStorage.key(0);
const numberOfKeys = sessionStorage.length;

Оба хранилища имеют ограничение по объему (обычно 5-10 МБ на домен), которое значительно превышает лимит традиционных cookie (4 КБ). Данные хранятся в виде строк, поэтому для работы с объектами необходимо использовать JSON.stringify() и JSON.parse().

// Пример работы с объектами
const userSettings = { theme: 'dark', language: 'ru' };
localStorage.setItem('settings', JSON.stringify(userSettings));

const loadedSettings = JSON.parse(localStorage.getItem('settings'));

Практические сценарии применения с точки зрения QA

1. Тестирование localStorage:

    *   Проверка сохранения данных после перезагрузки браузера и перезапуска системы.
    *   Проверка синхронизации данных между разными вкладками.
    *   Валидация поведения при превышении квоты хранилища.
    *   Тестирование очистки данных через настройки браузера.

1. Тестирование sessionStorage:

    *   Проверка изоляции данных между вкладками.
    *   Проверка автоматической очистки при закрытии вкладки.
    *   Проверка сохранения данных при обновлении страницы (F5) и переходе по истории (вперед/назад).
    *   Тестирование поведения в режиме инкогнито (данные должны удаляться).

1. Общие тестовые сценарии:

    *   **Безопасность**: Убедиться, что чувствительные данные (токены, пароли) не хранятся в `localStorage` из-за риска XSS-атак.
    *   **Производительность**: Проверка скорости чтения/записи при большом объеме данных.
    *   **Совместимость**: Работа хранилищ в разных браузерах и их версиях.
    *   **Восстановление после ошибок**: Поведение приложения при поврежденных или невалидных данных в хранилище.

Ключевые выводы для выбора

• Используйте localStorage для данных, которые должны сохраняться надолго: настройки пользователя, состояние интерфейса, токены аутентификации (с осторожностью).
• Используйте sessionStorage для временных данных сеанса: данные формы во время многостраничного заполнения, информация о текущей сессии, временные токены.
• Никогда не храните конфиденциальную информацию (пароли, номера карт) в любом из клиентских хранилищ без дополнительного шифрования из-за уязвимости к XSS-атакам.

Понимание этих различий критически важно как для разработчиков при проектировании архитектуры приложения, так и для QA-инженеров при составлении полного и эффективного плана тестирования клиентской части веб-приложений.