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

Question

deepseek-v3.2 · Accepted Answer

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

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

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

*   **Объём хранения**: Обычно ограничен **5–10 МБ** на домен (может варьироваться в зависимости от браузера).
*   **Область видимости (scope)**: Данные привязаны к **протоколу, домену и порту**. Разные вкладки/окна, даже с одним URL, имеют **разные, изолированные** хранилища сессий.
*   **Время жизни**: Данные существуют, пока открыта вкладка или окно браузера. Обновление страницы (F5) не очищает хранилище, но открытие новой вкладки через "Новое окно" или "Новая вкладка" создаёт новую сессию.
*   **Синхронный API**: Все операции (чтение/запись) являются синхронными и блокируют основной поток. Это важно учитывать при работе с большими объёмами данных.
*   **Структура данных**: Хранит данные в виде пар **ключ-значение**, где и ключ, и значение должны быть строками. Для хранения сложных объектов (массивы, объекты) их необходимо сериализовать в JSON.

### Типичные сценарии использования

В Session Storage целесообразно хранить временные, контекстные данные, актуальные только в рамках одной рабочей сессии пользователя:

1.  **Данные формы на нескольких шагах (мастер/воркфлоу)**: Сохранение введённой информации между шагами многостраничной формы без отправки на сервер.
    ```javascript
    // На шаге 1
    sessionStorage.setItem('wizardStep1Data', JSON.stringify({ name: 'Иван', email: 'ivan@example.com' }));

// На шаге 2 (даже после обновления страницы)
    const step1Data = JSON.parse(sessionStorage.getItem('wizardStep1Data'));
    console.log(step1Data.name); // 'Иван'
    ```

2.  **Временные настройки интерфейса (UI State)**: Сохранение состояния UI (например, открыта/закрыта боковая панель, выбранная тема оформления, фильтры в таблице) в рамках сессии.
    ```javascript
    // Пользователь открыл сайдбар
    sessionStorage.setItem('isSidebarCollapsed', 'false');

// После обновления страницы можно восстановить состояние
    const isCollapsed = sessionStorage.getItem('isSidebarCollapsed') === 'true';
    toggleSidebar(isCollapsed);
    ```

3.  **Токены аутентификации или сессионные идентификаторы** (с осторожностью): Кратковременное хранение чувствительных данных, которые должны быть уничтожены сразу после закрытия вкладки. **Важно:** Для критически важных данных (access token) предпочтительнее использовать `httpOnly` cookies или более безопасные механизмы.

4.  **Кеширование данных для одной сессии**: Временное хранение результатов API-запросов или других данных, чтобы избежать повторных запросов к серверу, пока пользователь активно работает с приложением.
    ```javascript
    async function fetchProducts() {
        const cacheKey = 'cachedProducts';
        let data = sessionStorage.getItem(cacheKey);

if (!data) {
            const response = await fetch('/api/products');
            data = await response.json();
            // Кешируем на время сессии
            sessionStorage.setItem(cacheKey, JSON.stringify(data));
        } else {
            data = JSON.parse(data);
        }
        return data;
    }
    ```

5.  **Передача данных между страницами в рамках SPA (Single Page Application)**: В классическом MPA (Multi-Page Application) данные теряются при переходе, но в SPA, где страница не перезагружается полностью, Session Storage может служить удобным буфером.

### Пример работы с Session Storage API

Базовые методы API идентичны для `sessionStorage` и `localStorage`:

```javascript
// Запись данных
sessionStorage.setItem('user', JSON.stringify({ id: 1, role: 'admin' }));

// Чтение данных
const userData = JSON.parse(sessionStorage.getItem('user'));

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

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

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

### Важные ограничения и отличия от Local Storage

*   **Изоляция между вкладками**: Каждая новая вкладка или окно создаёт новый контекст sessionStorage, даже для одного домена. Это основное отличие от localStorage, который является общим.
*   **Не для критически важных данных**: Из-за ограниченного размера и того, что пользователь может очистить хранилище в настройках браузера, Session Storage не подходит для постоянного хранения.
*   **Синхронность**: Для больших данных предпочтительнее использовать асинхронные API, такие как `IndexedDB`, чтобы не блокировать основной поток.
*   **XSS-уязвимость**: Как и любое клиентское хранилище, Session Storage уязвимо для межсайтового скриптинга (XSS). Не храните в нём конфиденциальную информацию без шифрования.

**Итог:** **Session Storage** — это удобный инструмент для хранения временных, сессионных данных на стороне клиента. Его основное предназначение — улучшение пользовательского опыта в рамках одной вкладки браузера за счёт сохранения состояния приложения, кеширования и управления данными многошаговых процессов. Для долгосрочного или кросс-вкладочного хранения следует использовать **Local Storage** или **серверные решения**, а для больших объёмов структурированных данных — **IndexedDB**.

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

Комментарии (1)

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

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

Типичные сценарии использования

Пример работы с Session Storage API

Важные ограничения и отличия от Local Storage