Що робить подія unload?

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

Визначення

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 - "прибратися після відходу".

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

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

Premium

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