sessionStorage

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

sessionStorage це об'єкт браузера, який зберігає пари «ключ, значення» у вигляді рядків тільки поки відкрита поточна вкладка або вікно. Простіше кажучи, це тимчасове сховище, доступне лише в межах однієї вкладки і одного домену; після закриття вкладки дані автоматично видаляються.

Теорія

TL;DR

sessionStorage живе рівно стільки, скільки відкрита вкладка.
Кожна вкладка має власне сховище, дані між вкладками не спільні.
Перезавантаження сторінки дані переживають, закриття вкладки ні.
API такий самий, як у localStorage: setItem, getItem, removeItem, clear, key, length.
Зберігає тільки рядки, об'єкти треба серіалізувати через JSON.
Обсяг приблизно 5 МБ, доступ обмежений тим самим origin.

Швидкий приклад

javascript

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

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

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

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

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

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

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

Методи такі самі, як у 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`

Приклад: дані форми, що живуть поки відкрита вкладка

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>

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

Приклад: дані однієї сесії авторизації

javascript

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

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

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

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

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

Важливі особливості і підсумок

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

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

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

Коротко: localStorage це «назавжди», а sessionStorage це «поки вкладка відкрита».

Типові помилки

Очікувати, що дані будуть у всіх вкладках. Друга вкладка того самого сайту отримує власне порожнє сховище, спільних даних немає.
Плутати «сесію» браузера з сесією на сервері. sessionStorage не має нічого спільного з серверною сесією і не надсилається на бекенд.
Вважати, що перезавантаження стирає дані. Перезавантаження сторінки і навіть відновлення вкладки після падіння браузера сховище переживає, стирає його саме закриття вкладки.
Класти об'єкт напряму. Без JSON.stringify() збережеться рядок "[object Object]".
Розраховувати на подію storage у тій самій вкладці. Вона там не спрацьовує, для реакції на власні зміни потрібен власний виклик або подія застосунку.
Тримати там цінні токени, вважаючи це безпечним. Дані все одно читаються будь-яким скриптом на сторінці, менший час життя не рятує від XSS.

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

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

Premium

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