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

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

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

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

Контент

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

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

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

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

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

## Головна відмінність

| Характеристика | **localStorage** | **sessionStorage** |
|---|---|---|
| **Час зберігання** | Дані зберігаються **назавжди**, поки користувач сам не очистить або код не видалить | Дані зберігаються **лише поки відкрита вкладка/вікно** |
| **Після перезавантаження сторінки** | Зберігаються | Зберігаються |
| **Після закриття вкладки** | Зберігаються | Видаляються |
| **Спільна доступність між вкладками одного домену** | Так | Ні (у кожної вкладки своє сховище) |
| **Обсяг** | ~5-10 МБ | ~5 МБ |
| **Тип даних** | Лише рядки (використовується `JSON.stringify`) | Лише рядки (так само через `JSON.stringify`) |
| **Обмеження доступу** | Лише той самий домен | Лише той самий домен і вкладка |
| **Часте застосування** | Теми, налаштування, токени, кеш даних | Тимчасові стани, фільтри, чернетки, сесійні токени |

---

## Приклад коду (однаковий API)

```javascript
// localStorage
localStorage.setItem('theme', 'dark');
console.log(localStorage.getItem('theme')); // "dark"

// sessionStorage
sessionStorage.setItem('step', '2');
console.log(sessionStorage.getItem('step')); // "2"
```

Після закриття вкладки:

- `localStorage` -> значення залишиться,
- `sessionStorage` -> буде очищено автоматично.

---

## Коли використовувати який

### localStorage - для "довговічних" даних

Використовуй, якщо дані мають **жити після закриття браузера**:

- вибрана тема (dark/light),
- запам'ятований логін,
- кошик покупок,
- налаштування користувача.

### sessionStorage - для "тимчасових" даних

Використовуй, якщо потрібно зберігати **стан всередині однієї сесії**:

- тимчасові форми та фільтри,
- стан кроків у майстрі реєстрації,
- сесійний токен авторизації.

---

## Приклад практичної відмінності

```javascript
// у першій вкладці
localStorage.setItem('color', 'red');
sessionStorage.setItem('page', 'home');

// у другій вкладці того самого сайту:
console.log(localStorage.getItem('color')); // "red" доступно
console.log(sessionStorage.getItem('page')); // null недоступно
```

---

## Коротко підсумок

| Сховище | Живе | Спільні дані між вкладками | Видаляється |
|---|---|---|---|
| localStorage | назавжди | так | вручну або очищенням браузера |
| sessionStorage | поки вкладка відкрита | ні | при закритті вкладки |

---

> **Запам'ятай просто:**
>
> - `localStorage` - **постійне сховище** (для "довгоживучих" даних).
> - `sessionStorage` - **тимчасове сховище** (для "поточної сесії").

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

Для рев’юера

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

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