Що робить sessionStorage?

JavaScriptJunior~2 хв читання

Визначення

sessionStorage - це об'єкт браузера, який зберігає пари "ключ-значення" (рядки) лише поки відкрита поточна вкладка (або вікно). Після закриття вкладки дані автоматично видаляються.

Простіше кажучи: це тимчасове сховище, доступне лише в межах однієї вкладки і домену.

1. Простий приклад

javascript

// Зберегти дані
sessionStorage.setItem('user', 'Tim');

// Прочитати дані
console.log(sessionStorage.getItem('user')); // "Tim"

// Видалити один елемент
sessionStorage.removeItem('user');

// Очистити все сховище
sessionStorage.clear();

2. Відмінність від localStorage

Сховище	Термін життя	Спільні дані між вкладками	Очищається при закритті
localStorage	Постійно (до очищення вручну)	Так (між вкладками одного домену)	Ні
sessionStorage	Поки відкрита вкладка	Ні (кожна вкладка - своя)	Так

Тобто якщо користувач відкриє твій сайт у новій вкладці, у нього буде нове, порожнє sessionStorage.

3. Усі методи такі самі, як у localStorage

Метод	Що робить	Приклад
`setItem(key, value)`	Зберігає значення	`sessionStorage.setItem('token', 'abc')`
`getItem(key)`	Повертає значення	`sessionStorage.getItem('token')`
`removeItem(key)`	Видаляє елемент	`sessionStorage.removeItem('token')`
`clear()`	Повністю очищає	`sessionStorage.clear()`
`key(index)`	Повертає ключ за індексом	`sessionStorage.key(0)`
`length`	Кількість записів	`sessionStorage.length`

4. Приклад: дані форми, які зберігаються, поки вкладка відкрита

javascript

<input id="name" placeholder="Ім'я" />

<script>
  const input = document.getElementById('name');

  // Відновлюємо значення при перезавантаженні сторінки
  input.value = sessionStorage.getItem('name') || '';

  // Зберігаємо при зміні
  input.addEventListener('input', () => {
    sessionStorage.setItem('name', input.value);
  });
</script>

Тепер при оновленні сторінки введене ім'я залишиться, але якщо закрити вкладку і відкрити сайт заново - поле очиститься.

5. Приклад: зберігання даних лише для однієї сесії авторизації

javascript

sessionStorage.setItem('sessionToken', 'abc123');

// при оновленні сторінки токен зберігається
console.log(sessionStorage.getItem('sessionToken')); // "abc123"

// але при закритті вкладки - зникне

Використовується, коли потрібно зберігати:

токен або стан входу лише до закриття вікна,
тимчасові дані (наприклад, стан форми чи фільтрів),
"чернетки" даних, які не потребують постійності.

6. Важливі особливості

Працює лише з рядками, тому для об'єктів:

javascript
sessionStorage.setItem('user', JSON.stringify({ name: 'Tim' })); const user = JSON.parse(sessionStorage.getItem('user'));
Обсяг зберігання - приблизно 5 МБ.
Доступ до даних має лише той самий домен і вкладка.
Можна використовувати подію storage, але вона не спрацьовує в тому самому вікні - лише між вкладками (що для sessionStorage зазвичай неактуально).

Підсумок

Параметр	`localStorage`	`sessionStorage`
Термін зберігання	Назавжди (до очищення)	Поки вкладка відкрита
Доступ між вкладками	Так	Ні
Очищення при закритті вікна	Ні	Так
Обсяг	~5-10 МБ	~5 МБ
Тип даних	Лише рядки	Лише рядки
Часте застосування	Налаштування, теми, дані користувача	Тимчасові сесії, форми, фільтри

Запам'ятай просто:

localStorage - "назавжди",

sessionStorage - "поки вкладка відкрита".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.