Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("pagehide", (event) => { })onpagehide = (event) => { }

APageTransitionEvent. Inherits fromEvent.

PageTransitionEvent.persistedRead only

Indicates if the document is loading from a cache.

In addition to theWindow interface, the event handler propertyonpagehide is also available on the following targets:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Like theunloadandbeforeunload events, this event is not reliably fired by browsers, especially on mobile. For example, thepagehide event is not fired at all in the following scenario:

1. A mobile user visits your page.
2. The user then switches to a different app.
3. Later, the user closes the browser from the app manager.

However, unlike theunload andbeforeunload events, this event is compatible with theback/forward cache (bfcache), so adding a listener to this event will not prevent the pagefrom being included in the bfcache.

The best event to use to signal the end of a user's session is thevisibilitychange event. In browsers that don't supportvisibilitychange thepagehide event is the next-best alternative.

If you're specifically trying to detect page unload events, thepagehide event is the best option.

See thePage Lifecycle API guide for more information about how this event relates to other events in the page lifecycle.

In this example, an event handler is established to watch forpagehide events and to perform special handling if the page is being persisted for possible reuse.

window.addEventListener(  "pagehide",  (event) => {    if (event.persisted) {      /* the page isn't being discarded, so it can be reused later */    }  },  false,);

This can also be written using theonpagehide event handler property on theWindow:

window.onpagehide = (event) => {  if (event.persisted) {    /* the page isn't being discarded, so it can be reused later */  }};

• Thepageshow event.
• Page Lifecycle API gives best-practices guidance on handling page lifecycle behavior in your web applications.
• PageLifecycle.js: a JavaScript library that deals with cross-browser inconsistencies in page lifecycle behavior.
• Back/forward cache explains what the back/forward cache is, and its implications for various page lifecycle events.