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

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

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

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

Контент

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

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

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

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

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

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

> `unload` - це подія, яка виникає, коли документ **вивантажується з пам'яті браузера**.
> Тобто користувач:
>
> - закриває вкладку,
> - оновлює сторінку (`F5`),
> - переходить за іншим посиланням,
> - або переходить на іншу сторінку в SPA при повному перезавантаженні.

## 1. Приклад використання

```javascript
window.addEventListener('unload', () => {
  console.log('Сторінка вивантажується...');
});
```

Це спрацює **в останній момент**, коли сторінка вже йде з пам'яті.

## 2. Типові сценарії застосування

- відправка статистики або логів "перед відходом" користувача;
- збереження даних у `localStorage` / `sessionStorage`;
- закриття з'єднань, WebSocket, звільнення ресурсів.

Наприклад:

```javascript
window.addEventListener('unload', () => {
  localStorage.setItem('lastVisited', new Date().toISOString());
});
```

## 3. Важливо: `unload` не те саме, що `beforeunload`

| Властивість | `beforeunload` | `unload` |
| --- | --- | --- |
| Коли спрацьовує | Перед вивантаженням | Під час вивантаження |
| Можна зупинити відхід | Так (`preventDefault()`) | Ні |
| Можна показати попередження | Так | Ні |
| Можна виконувати код | Так, але обмежено | Дуже обмежено |
| Типові задачі | Попередити про незбережені дані | Очищення, логування |

## 4. Обмеження і нюанси

Сучасні браузери **сильно обмежують** `unload`, щоб не гальмувати закриття сторінок:

- **Асинхронні дії (**`fetch`**,** `setTimeout`**) не працюють** - браузер не чекає на їх завершення.
- Не можна показати діалог чи модальне вікно.
- Працюють **лише синхронні** операції (наприклад, запис у `localStorage` чи `navigator.sendBeacon()`).
- У деяких браузерах (Safari, iOS) `unload` **взагалі не викликається** - використовують `pagehide`.

## 5. Рекомендована альтернатива

### `pagehide`

Сучасна і надійніша подія, особливо на мобільних браузерах:

```javascript
window.addEventListener('pagehide', (event) => {
  console.log('Сторінка прихована або вивантажена');
});
```

Вона працює навіть при переході на іншу вкладку і надійніша, ніж `unload`.

## 6. Приклад: відправка аналітики при закритті сторінки

```javascript
window.addEventListener('unload', () => {
  navigator.sendBeacon('/analytics', JSON.stringify({ event: 'exit' }));
});
```

`navigator.sendBeacon()` - це **єдиний безпечний спосіб** відправити дані на сервер при закритті сторінки,
тому що він працює **асинхронно**, але браузер все одно гарантує відправку.

## Підсумок

| Що робить | Подія `unload` |
| --- | --- |
| Коли спрацьовує | Коли користувач покидає сторінку |
| Можна зупинити перехід | Ні |
| Підходить для | Очищення, логів, збереження стану |
| Працює асинхронно | Ні (лише синхронно або через `sendBeacon`) |
| Сучасна альтернатива | `pagehide` |
| Часте застосування | Аналітика, збереження стану |

> **Запам'ятай просто:**
> `beforeunload` - "попередити перед відходом",
> `unload` - "прибратися після відходу".

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

Для рев’юера

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

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