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

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

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

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

Контент

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

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

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

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

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

## Визначення

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

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

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

Для рев’юера

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

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