Когда очищается sessionStorage?

Когда очищается sessionStorage

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

Основное правило

sessionStorage очищается при закрытии вкладки или окна браузера. Данные существуют только в рамках одной сессии браузера для конкретной вкладки.

// Сохранение данных в sessionStorage
sessionStorage.setItem('user_id', '12345');
sessionStorage.setItem('temp_data', JSON.stringify({name: 'John'}));

// Чтение
const userId = sessionStorage.getItem('user_id');
console.log(userId); // '12345'

// После закрытия вкладки:
// sessionStorage будет пуст при открытии новой вкладки

Сценарии очистки

1. Закрытие вкладки (основной сценарий)

Самый очевидный случай — пользователь закрывает вкладку или окно браузера.

// Вкладка 1: сохраняю данные
sessionStorage.setItem('tab_id', 'tab_1');

// Вкладка 1: закрыта — sessionStorage очищен

// Открываю ту же страницу в новой вкладке (Вкладка 2)
// sessionStorage.getItem('tab_id') вернёт null
// Это НОВОЕ, ПУСТОЕ хранилище для этой вкладки

2. Перезагрузка страницы (данные сохраняются)

Перезагрузка страницы F5 или Ctrl+R НЕ очищает sessionStorage. Данные остаются.

// До перезагрузки
sessionStorage.setItem('message', 'Hello');
console.log(sessionStorage.getItem('message')); // 'Hello'

// Пользователь нажимает F5 (перезагрузка)
// После перезагрузки
console.log(sessionStorage.getItem('message')); // 'Hello' - все ещё здесь!

3. Переход на другую страницу (данные сохраняются)

Если пользователь кликает на ссылку и переходит на другую страницу — sessionStorage остаётся нетронутым, потому что он связан с вкладкой, а не с конкретной страницей.

// На странице index.html
sessionStorage.setItem('user_data', JSON.stringify({id: 1, name: 'Alice'}));

// Пользователь переходит по ссылке на about.html
// На странице about.html
console.log(sessionStorage.getItem('user_data')); // Данные всё ещё есть!

4. Открытие ссылки в новой вкладке (новое хранилище)

Если пользователь открывает ссылку в новой вкладке (Ctrl+Click или правый клик → "Open in new tab"), будет создано НОВОЕ хранилище sessionStorage для этой вкладки.

// Вкладка А: сохраняю данные
sessionStorage.setItem('state', 'editing');

// Открываю ссылку в новой вкладке (Ctrl+Click)
// Вкладка Б: новое, пустое sessionStorage
sessionStorage.getItem('state') // null

5. Закрытие последней вкладки приложения

Если это последняя вкладка сайта, и вы закроете её, данные очищены. Но если открыть новую вкладку того же сайта, будет новое sessionStorage.

Отличие от localStorage

Это критическое различие между sessionStorage и localStorage:

// localStorage - сохраняется навсегда (до явного удаления)
localStorage.setItem('user_pref', 'dark_mode');
// Закрыли браузер, открыли заново
localStorage.getItem('user_pref'); // 'dark_mode' - всё ещё есть!

// sessionStorage - очищается при закрытии вкладки
sessionStorage.setItem('session_id', 'xyz123');
// Закрыли вкладку, открыли новую вкладку того же сайта
sessionStorage.getItem('session_id'); // null - очищено!

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

Хранение токена сессии

// После успешного логина
sessionStorage.setItem('auth_token', 'eyJhbGci...');

// При выходе или закрытии браузера токен автоматически удаляется
// Это повышает безопасность

Сохранение состояния формы при перезагрузке

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

const restoreFormState = () => {
  const saved = sessionStorage.getItem('form_draft');
  if (saved) {
    return JSON.parse(saved);
  }
  return null;
};

// Пользователь перезагружает страницу
// Форма восстанавливается из sessionStorage

Передача данных между страницами

// На странице 1: пользователь выбрал товар
sessionStorage.setItem('selected_product', JSON.stringify({id: 5, name: 'Laptop'}));

// Переходит на страницу 2
// На странице 2: читаю данные
const product = JSON.parse(sessionStorage.getItem('selected_product'));
if (product) {
  console.log(`Вы выбрали: ${product.name}`);
}

Явная очистка данных

Можно вручную очистить sessionStorage:

// Удалить одно значение
sessionStorage.removeItem('temp_data');

// Удалить всё содержимое sessionStorage
sessionStorage.clear();

// Проверить, пусто ли хранилище
if (sessionStorage.length === 0) {
  console.log('sessionStorage пуст');
}

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

// ❌ НИКОГДА не сохраняй чувствительные данные, которые легко украсть
sessionStorage.setItem('password', 'secret123'); // Плохо!
sessionStorage.setItem('credit_card', '4111-1111-1111-1111'); // Плохо!

// ✅ sessionStorage подходит для временных данных, которые:
// - Не критичны для безопасности
// - Нужны в текущей сессии
// - Могут быть прочитаны JavaScript (уязвимо для XSS)

// Для токенов лучше использовать httpOnly cookies

Как проверить в браузере

В DevTools (F12) вкладка Application → Session Storage:

Session Storage
├── http://localhost:3000
│   ├── user_id: "12345"
│   ├── theme: "dark"
│   └── temp_data: "{\"key\":\"value\"}"
└── https://example.com
    └── (пусто)

Итоговый чеклист

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

1. Используй sessionStorage для временных данных текущей сессии
2. Не сохраняй чувствительные данные (пароли, карты)
3. Всегда обрабатывай случай, когда данных нет (getItem вернёт null)
4. Используй localStorage для данных, которые нужны после перезагрузки браузера
5. Помни о лимите объёма (~5-10MB в зависимости от браузера)

sessionStorage — это удобный механизм для передачи данных между страницами в одной сессии, но помни, что все данные удаляются при закрытии вкладки.