JavaScript Window pagehide Event: The Complete Guide

JavaScript provides many events that enhance the interactivity and functionality of web pages. One such essential event is the pagehide event. This guide will explain everything you need to know about the pagehide event. We’ll cover what it is, why it’s useful, where to use it, how to implement it, and when it comes into play. Let’s dive in!

What is the pagehide Event?

The pagehide event in JavaScript is fired when a user navigates away from a page. This can happen when the user closes the browser, navigates to a different page, or switches between different browser tabs. The event is crucial for handling scenarios where you need to save data or clean up resources when the page is being hidden.

Why Use the pagehide Event?

Using the pagehide event is beneficial because it allows you to execute code when a page is about to be hidden. This can be useful for saving user data, cleaning up resources, or logging user activity. It enhances the user experience by ensuring that important actions are performed before the user leaves the page.

Where Can You Use the pagehide Event?

You can use the pagehide event on the window object to detect when a page is being hidden. This event is particularly useful in web applications that need to save user data or clean up resources before the user navigates away from the page.

How to Use the pagehide Event

Let’s dive into some examples to see how the pagehide event works in different scenarios.

Basic Example

Here’s a simple example to show how the pagehide event works with the window object.

<p id="status">Status: Page is visible 👀</p>

<script>
  window.addEventListener("pagehide", (event) => {
    document.getElementById("status").textContent = "Status: Page is hidden 🚪";
  });
</script>

In this example, the status message updates when the page is hidden.

Example with Saving Data

Let’s see how the pagehide event can be used to save user data before the page is hidden.

<textarea id="userData" placeholder="Enter some data..."></textarea>

<script>
  window.addEventListener("pagehide", () => {
    const data = document.getElementById("userData").value;
    localStorage.setItem("userData", data);
    console.log("Status: User data saved! 💾");
  });

  window.addEventListener("pageshow", () => {
    const savedData = localStorage.getItem("userData");
    if (savedData) {
      document.getElementById("userData").value = savedData;
    }
  });
</script>

In this example, user data is saved to local storage when the page is hidden and restored when the page is shown again.

Example with Resource Cleanup

Let’s see how the pagehide event can be used to clean up resources before the page is hidden.

<p>Status: Page is visible 👀</p>

<script>
  let interval;

  function startResource() {
    interval = setInterval(() => {
      console.log("Resource is active 💻");
    }, 1000);
  }

  function cleanupResource() {
    clearInterval(interval);
    console.log("Resource cleaned up 🧹");
  }

  window.addEventListener("pageshow", startResource);
  window.addEventListener("pagehide", cleanupResource);

  startResource(); // Initial call to start resource
</script>

In this example, a resource is cleaned up when the page is hidden to prevent memory leaks or unnecessary processing.

When to Use the pagehide Event

The pagehide event is particularly useful in scenarios where:

• You need to save user data before the page is hidden.
• You want to clean up resources or perform cleanup actions.
• You need to log user activity or track page visibility.

Comparing pagehide with Other Events

To understand the pagehide event better, let’s compare it with other common events like beforeunload and pageshow.

Code Examples of Different Events

Here’s how you can use some of these events in your code:

<p id="pagehideStatus">Pagehide status: Waiting ⏳</p>
<p id="beforeunloadStatus">Beforeunload status: Waiting ⏳</p>
<p id="pageshowStatus">Pageshow status: Waiting ⏳</p>

<script>
  window.addEventListener("pagehide", () => {
    document.getElementById("pagehideStatus").textContent = "Pagehide status: Page is hidden 🚪";
  });

  window.addEventListener("beforeunload", (event) => {
    document.getElementById("beforeunloadStatus").textContent = "Beforeunload status: Preparing to unload... 🛑";
    event.preventDefault();
    event.returnValue = "";
  });

  window.addEventListener("pageshow", () => {
    document.getElementById("pageshowStatus").textContent = "Pageshow status: Page is shown 🎉";
  });
</script>

Conclusion

The pagehide event in JavaScript is a powerful tool for handling actions before the page is hidden. By understanding and using this event, you can create more interactive and user-friendly web applications. Whether you are saving user data, cleaning up resources, or logging user activity, the pagehide event helps you ensure that your applications work smoothly and effectively.

Summary

• What: The pagehide event fires when a user navigates away from a page.
• Why: It helps in saving user data, cleaning up resources, and logging user activity.
• Where: Use it on the window object to detect when a page is being hidden.
• How: By adding an event listener for pagehide and handling the necessary actions.
• When: Use it whenever you need to manage actions triggered by the page being hidden to improve user experience.

Feel free to use the examples provided and modify them to suit your needs. Happy coding! 🎉