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

Ответ на вопрос: Что хранится в Session Storage?

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

Ключевые характеристики Session Storage

• Область видимости: Данные изолированы не только по домену (протокол, хост, порт), но и по вкладке браузера. Открытие сайта в новой вкладке создает новое, пустое хранилище сессии, даже если это тот же самый домен.
• Время жизни: Данные существуют только в течение сессии страницы. Сессия страницы длится, пока открыта вкладка браузера, и сохраняется при перезагрузках и восстановлениях страницы (например, по кнопке "Назад" или при refresh). Однако открытие сайта в новой вкладке или окне инициирует новую сессию.
• Объем данных: Стандартный лимит составляет около 5 МБ на домен (может незначительно варьироваться в зависимости от браузера). Попытка превысить лимит вызовет исключение QuotaExceededError.
• Тип данных: Хранит данные исключительно в строковом формате (string). Для сохранения сложных объектов (массивов, объектов) необходимо использовать JSON.stringify() при записи и JSON.parse() при чтении.

Типичные сценарии использования (что обычно хранят)

Session Storage идеально подходит для временной информации, которая должна быть доступна в рамках одного "сеанса работы" пользователя с приложением в конкретной вкладке.

1. Данные формы для восстановления: Сохранение частично заполненных полей сложной формы на случай случайного обновления страницы.

   // Сохранение значения поля при изменении
   document.getElementById('inputField').addEventListener('input', (e) => {
       sessionStorage.setItem('formInput', e.target.value);
   });
   
   // Восстановление значения при загрузке страницы
   window.addEventListener('load', () => {
       const savedValue = sessionStorage.getItem('formInput');
       if (savedValue) {
           document.getElementById('inputField').value = savedValue;
       }
   });
   

2. Временные настройки UI: Сохранение состояния элементов интерфейса (свернут/развернут аккордеон, выбранная тема отображения для текущей сессии).

   // Переключение и сохранение темы
   function toggleTheme() {
       const currentTheme = sessionStorage.getItem('uiTheme') || 'light';
       const newTheme = currentTheme === 'light' ? 'dark' : 'light';
       sessionStorage.setItem('uiTheme', newTheme);
       applyTheme(newTheme);
   }
   

3. Токены аутентификации или временные ключи API: Кратковременное хранение чувствительных данных, которые должны стать недействительными сразу после закрытия вкладки (например, токен сессии, полученный после входа).

4. Параметры многошагового процесса (wizard): Сохранение данных, введенных на предыдущих шагах, например, при оформлении заказа или регистрации.

5. Временная информация о работе приложения: Например, флаги, предотвращающие повторное отображение одного и того же модального окна или уведомления в течение сессии.

Отличия от Local Storage и Cookies

Для понимания контекста важно сравнить Session Storage с соседними технологиями:

API для работы с Session Storage (JavaScript)

Работа ведется через объект window.sessionStorage.

// Запись данных
sessionStorage.setItem('ключ', 'значение'); // Ключ и значение - строки
sessionStorage.setItem('userObject', JSON.stringify({ name: 'Alice', id: 123 }));

// Чтение данных
const value = sessionStorage.getItem('ключ'); // Возвращает строку или null
const user = JSON.parse(sessionStorage.getItem('userObject') || '{}');

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

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

// Получение ключа по индексу и количества элементов
const keyName = sessionStorage.key(0); // Имя первого ключа
const storageSize = sessionStorage.length; // Количество сохраненных пар

Вывод для QA Engineer

Понимание работы Session Storage критически важно для тестирования веб-приложений. Тестировщик должен проверять:

• Целостность данных: Сохраняются ли данные при перезагрузке страницы и восстанавливаются ли корректно.
• Изоляцию: Убедиться, что данные из Session Storage одной вкладки недоступны в другой, даже на том же домене.
• Очистку: Данные должны удаляться после закрытия вкладки.
• Обработку ошибок: Как приложение реагирует на переполнение хранилища (квоту в 5 МБ).
• Безопасность: Session Storage, как и Local Storage, уязвим для XSS-атак, так как доступен через JavaScript на той же странице. Важно проверять, не хранятся ли там критические данные (например, пароли, токены без крайней необходимости). Для чувствительной информации более безопасны HTTP-only Cookies.