👀 Live Preview
Reload this section’s demo logic — a counter in sessionStorage proves unload ran:
Checking unload demo state…
Reload the full page to trigger unload on this tutorial — the try-it editor demos show the pattern interactively.
HTML onunload Attribute
Overview
Introduction
The onunload handler runs JavaScript when the unload event fires on window — when the user navigates away, reloads, or closes the tab and the document is being torn down. Use it for quick cleanup: save a draft to localStorage, clear timers, or send analytics with navigator.sendBeacon. It runs too late for confirmation dialogs — use onbeforeunload for leave warnings. Prefer addEventListener("unload", …) in production, and consider pagehide for modern apps.
What You’ll Learn
Window handler
Page leave.
unload
Teardown.
vs beforeunload
Warn vs cleanup.
sendBeacon
Analytics.
Sync save
localStorage.
addEventListener
Preferred way.
Fundamentals
Purpose of onunload Attribute
The primary purpose of onunload is to run last-moment tasks when a page session ends — saving unsent form text, flushing analytics, or releasing resources. The browser gives handlers very little time; keep work short and synchronous.
Unlike beforeunload, you cannot prompt the user to stay. By the time unload fires, the user has already chosen to leave. For “unsaved changes” warnings, use onbeforeunload instead.
Keep handlers fast
Async fetch may be cancelled during unload. Use navigator.sendBeacon() for outbound data or synchronous localStorage for small drafts.
Foundation
📝 Syntax
Assign the handler on window — the event target for page unload:
onunload.html
<body onunload="performUnloadActions()">
<!-- page content -->
</body>
<script>
window.onunload = performUnloadActions;
window.addEventListener("unload", performUnloadActions);
</script>Syntax Rules
- Target is
window;<body onunload>is a legacy HTML shortcut. - Value is JavaScript executed when the
unloadevent fires. - Triggered by navigation, reload, tab close, and some back/forward moves.
- Cannot show custom leave dialogs — use
beforeunloadfor that. - Keep handlers fast; avoid long loops or async work that may not finish.
- JavaScript:
window.onunload = function() { … }. - Modern alternative:
window.addEventListener("unload", handler).
Reference
💎 Values
The onunload property accepts a function or function reference:
onunload="performUnloadActions()"— Call a named function on body.window.onunload = performUnloadActions— Property assignment.- Preferred:
window.addEventListener("unload", handler).
onunload-handler.js
function performUnloadActions() {
// Sync save — reliable during unload
localStorage.setItem("draft", noteInput.value);
// Analytics — sendBeacon survives page teardown
navigator.sendBeacon("/analytics", JSON.stringify({ left: true }));
}
window.addEventListener("unload", performUnloadActions);Cheat Sheet
⚡ Quick Reference
| Event / API | When it runs | Notes |
|---|---|---|
unload | Document tearing down | onunload |
beforeunload | Before leave (cancellable) | Leave confirmation |
pagehide | Page hidden (bfcache) | Modern alternative |
visibilitychange | Tab hidden/shown | Pause work, not full unload |
navigator.sendBeacon() | During unload | Reliable analytics POST |
localStorage.setItem | Sync during unload | Small draft saves |
Scope
Applicable Elements
| Target | Supported? | Notes |
|---|---|---|
window | Yes | Primary and correct target |
window.addEventListener("unload") | Yes | Recommended registration |
<body onunload> | Yes (legacy) | Maps to window unload in practice |
<form>, <input> | No | Not an element-level event |
<iframe> content | Separate | Each document has its own unload |
Compare
onunload vs onbeforeunload vs pagehide
| Handler | When it fires | Typical use |
|---|---|---|
onbeforeunload | Before page unloads | “Unsaved changes” warning |
onunload | During document teardown | Quick cleanup, sendBeacon |
pagehide | Page leaves view (incl. bfcache) | Modern session end handling |
visibilitychange | Tab visibility changes | Pause timers, save state |
Hands-On
Examples Gallery
Inline body handler with sessionStorage timestamp, dynamic window.onunload, and addEventListener draft save.
Example — onunload on body
Save a timestamp when the page unloads — visible after reload:
body-onunload.html
<body onunload="performUnloadActions()">
<p id="status"></p>
<script>
function performUnloadActions() {
sessionStorage.setItem("lastUnload", new Date().toLocaleTimeString());
}
status.textContent = sessionStorage.getItem("lastUnload") || "Reload to test";
</script>
</body>How It Works
When the document unloads, performUnloadActions() writes to sessionStorage. On the next load, your script reads it back — proof the handler ran.
Dynamic Values with JavaScript
Assign the handler on window at runtime:
dynamic-onunload.html
<script>
window.onunload = function () {
sessionStorage.setItem("dynamicUnload", Date.now().toString());
};
</script>How It Works
window.onunload is equivalent to the inline body attribute. Attach after the page loads when you need conditional unload behavior.
Example — Save draft on unload
Persist textarea content synchronously when the user leaves:
unload-draft-save.html
window.addEventListener("unload", function () {
localStorage.setItem("draft", noteInput.value);
});
// On next visit:
noteInput.value = localStorage.getItem("draft") || "";How It Works
Synchronous localStorage writes are among the few reliable operations during unload. Pair with periodic saves while the user types for better UX.
A11y
♿ Accessibility
- Do not trap users —
unloadcannot show accessible custom dialogs; usebeforeunloadsparingly for leave warnings. - Save work proactively — Relying only on unload may lose data for users with assistive tech or mobile tab discard.
- Avoid blocking operations — Long unload handlers harm everyone, especially on slow devices.
- Announce autosave in UI — If drafts restore on return, show a clear “Draft restored” message with
aria-live. - Respect user intent — Never use unload handlers to prevent leaving — that belongs in
beforeunloadwith care.
🧠 How onunload Works
1
User leaves
Navigate / close.
Trigger
2
beforeunload?
Optional warn.
Earlier
3
unload fires
onunload runs.
Event
=
Quick cleanup
Beacon, draft save.
Compatibility
Browser Support
The unload event is supported in all browsers, but mobile and modern browsers may limit how much work runs. Prefer pagehide and proactive saves for critical data.
Window events · Universal support
Universal onunload support
All browsers fire unload, but keep handlers minimal — behavior varies on mobile.
99% Browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Limited on iOSMicrosoft Edge Fully supported
Full supportInternet Explorer Supported
Full supportOpera Fully supported
Full supportonunload attribute 99% supported
Bottom line: Supported everywhere, but treat it as a last-chance hook — not your only save strategy.
Pro Tips
💡 Best Practices
✅ Do
- Keep unload handlers short and synchronous
- Use
navigator.sendBeacon()for analytics on leave - Save drafts on
inputtoo, not only unload - Use
onbeforeunloadfor leave confirmations - Prefer
addEventListener("unload", …)onwindow
❌ Don’t
- Run slow or async-only work in
onunload - Show custom dialogs during unload — too late
- Rely on unload as the only data-save mechanism
- Block the browser with long loops on leave
- Confuse
unloadwithbeforeunload
Wrap Up
Conclusion
The onunload attribute runs JavaScript when the page session ends — useful for quick cleanup, draft saves, and analytics beacons when the user navigates away.
Use beforeunload for warnings, keep handlers fast, save data proactively, and prefer addEventListener on window in production.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about onunload
Bookmark these before wiring page-leave handlers.
5
Core concepts 01
window event
Page leave.
Where 02
Too late
No dialogs.
When 03
beforeunload
Warn first.
Compare 04
sendBeacon
Analytics.
API 05
Not async
Save early.
Gotcha❓ Frequently Asked Questions
It runs JavaScript when the
unload event fires — when the document is being torn down because the user navigated away, reloaded, or closed the tab.onbeforeunload runs before leave and can trigger a confirmation dialog. onunload runs during teardown — too late for prompts, good for quick cleanup.Often unreliable — the request may be cancelled. Use
navigator.sendBeacon() for small outbound payloads during unload.Both work in HTML, but the event target is
window. In JavaScript, use window.onunload or window.addEventListener("unload", …).window.addEventListener("unload", handler) is preferred. For new projects, also evaluate pagehide for bfcache-friendly behavior.Yes, but mobile browsers may skip or shorten unload work. Never depend on unload alone for critical data persistence.
Handle page leave gracefully
Practice the onunload attribute with timestamp and draft-save demos in the Try It editor.
About the author
5 people found this page helpful