Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «sessionStorage». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`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="Ім'я" />

// Відновлюємо значення при перезавантаженні сторінки
  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.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати667 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.