Зачем нужен Session Storage?

Session Storage в браузере

Session Storage — это Web Storage API, которая хранит данные в пределах одной сессии браузера. Это один из механизмов для сохранения информации на клиенте, наряду с Local Storage и Cookie.

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

Время жизни:

• Данные удаляются при закрытии вкладки или окна браузера
• Каждая вкладка имеет свое изолированное хранилище
• Это отличает её от Local Storage, где данные хранятся постоянно

Объем и границы:

• Обычно 5-10 МБ на домен (зависит от браузера)
• Работает только на клиентской стороне
• Синхронное хранилище — операции блокируют выполнение кода

Область видимости:

• Данные видны только в пределах одного домена (включая протокол и порт)
• Разные вкладки одного домена имеют разные Session Storage
• Iframe может получить доступ к Session Storage родительской страницы

Примеры использования

// Сохранение данных
sessionStorage.setItem(userPreferences, JSON.stringify({
  theme: dark,
  language: ru
}));

// Получение данных
const preferences = JSON.parse(sessionStorage.getItem(userPreferences));
console.log(preferences); // { theme: dark, language: ru }

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

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

// Получение количества элементов
console.log(sessionStorage.length);

// Получение ключа по индексу
const keyName = sessionStorage.key(0);

Практические примеры использования

Сохранение состояния при навигации:

// На странице с формой
const saveFormState = (formData) => {
  sessionStorage.setItem(formState, JSON.stringify(formData));
};

// При возврате на страницу
const restoreFormState = () => {
  const saved = sessionStorage.getItem(formState);
  return saved ? JSON.parse(saved) : null;
};

Сохранение временных настроек:

// Сохранение выбранных фильтров для одной сессии
const applyFilters = (filters) => {
  sessionStorage.setItem(activeFilters, JSON.stringify(filters));
};

const getActiveFilters = () => {
  return JSON.parse(sessionStorage.getItem(activeFilters) || {});
};

Отслеживание состояния модального окна:

// Запомнить, был ли открыт модал, чтобы переоткрыть при перезагрузке
const openModal = (modalId) => {
  sessionStorage.setItem(openedModal, modalId);
};

const getOpenedModal = () => {
  return sessionStorage.getItem(openedModal);
};

Session Storage vs Local Storage vs Cookie

Когда использовать Session Storage

Хорошие случаи использования:

1. Сохранение состояния многошаговой формы
2. Кэширование данных, полученных в этой сессии
3. Сохранение позиции скролла или открытого раздела
4. Временное хранение ID элемента для фильтрации
5. Сохранение параметров поиска для одной сессии

Плохие случаи использования:

1. Хранение конфиденциальных данных (используй HttpOnly Cookie)
2. Данные, которые должны пережить закрытие вкладки (используй Local Storage)
3. Большие объемы данных (может замедлить приложение)
4. Критичные для бизнеса данные (нужна синхронизация с сервером)

Важные моменты

Производительность:

• Доступ к Session Storage — синхронная операция, может блокировать UI
• Для больших объемов данных лучше использовать IndexedDB
• Не нужно сохранять данные, которые хранятся на сервере

Безопасность:

• Доступна для XSS атак
• Не отправляется автоматически на сервер
• Используй CSP (Content Security Policy) для защиты

Масштабируемость:

• При сложной структуре данных используй JSON для сериализации
• Валидируй данные при восстановлении из хранилища
• Не полагайся только на Session Storage для критичных данных