How to distinguish between closing a browser tab and closing the entire browser using JavaScript?

JavaScript distinguishes between browser tab closing and browser full closing

In the daily use of multi-tab browsing, users may need to close a single tab or the entire browser. In some application scenarios, for example, a specific action is required when the browser is completely closed (such as clearing login information), but not when closing a single tab. This article will explore how to use JavaScript to distinguish between these two situations and provide corresponding solutions.

Problem description

Suppose the web application we developed runs on the Chrome browser on the Windows system. The requirement is to clear the login information when the user closes the entire browser, while keeping the login information unchanged when closing a single tab. How to implement this function?

Solution

We can use HTML5's sessionStorage object to solve this problem. sessionStorage allows key-value pair data to be stored in the same session. When closing the browser, the data in sessionStorage will be cleared, while closing a single tab will not affect the sessionStorage data of other tabs.

The specific implementation steps are as follows:

1. Listen to the browser close event: Use the beforeunload event to listen to the browser close or tab close operation.

    window.addEventListener('beforeunload', function(e) {
        // Add code to clear login information here, but it should be noted that directly executing here may also lead to clearing when closing the tab.
    });

2. Use sessionStorage to distinguish closing behavior: When each tab is loaded, set a sessionStorage item and check whether the item exists when closed. If it exists, it means that the tab page is closed; if it does not exist, it means that the entire browser is closed.

    // Set sessionStorage when page loads
    window.addEventListener('load', function() {
        sessionStorage.setItem('tabOpen', 'true');
    });
   
    // Check sessionStorage when closed
    window.addEventListener('beforeunload', function(e) {
        if (!sessionStorage.getItem('tabOpen')) {
            // Clear login information clearLoginInfo();
        } else {
            // Remove sessionStorage item sessionStorage.removeItem('tabOpen');
        }
    });
   
    function clearLoginInfo() {
        // Add the code to clear login information here to console.log('Clearing login information...');
    }

Through the above method, we can effectively distinguish between closing the tab page and closing the browser, and perform the operation of clearing the login information when the browser is completely closed, while this operation will not be performed when closing a single tab page. It should be noted that the beforeunload event may be intercepted or delayed by the browser, depending on the specific implementation of the browser and user settings. To improve reliability, other technologies, such as server-side session management, may be considered.

The above is the detailed content of How to distinguish between closing a browser tab and closing the entire browser using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!