How to distinguish between closing tabs and closing the entire browser in Chrome browser using JavaScript?

JavaScript distinguishes between Chrome browser tabs and browsers

When developing web applications, it is necessary to distinguish whether the user has closed the browser tab or the entire browser. For example, the login information needs to be cleared when the user closes the browser, but not when closing the tab. This article describes how to implement this feature in Chrome browser on Windows.

This method uses the browser's sessionStorage to track user behavior. sessionStorage is a storage mechanism provided by HTML5. The data is cleared when the tab is closed, but it remains for a while when the entire browser is closed until the browser is completely closed.

The following JavaScript code can distinguish between closing a tab and closing the entire browser:

 window.onbeforeunload = function(event) {
    // Set the flag to indicate that the page will be uninstalled sessionStorage.setItem('isClosing', 'true');
};

window.onunload = function(event) {
    // Get the flag const isClosing = sessionStorage.getItem('isClosing');

    if (isClosing === 'true') {
        // The flag exists, indicating that the entire browser is closed// Clear the login information clearLoginInfo();

        // Clear the flag sessionStorage.removeItem('isClosing');
    } else {
        // The flag does not exist, indicating that the tab page is closed// No action is performed}
};

function clearLoginInfo() {
    // Clear the logic of login information, for example:
    localStorage.removeItem('userToken'); 
}

In the code, the onbeforeunload event sets the flag isClosing , and onunload event checks this flag. If the flag exists, call the clearLoginInfo function to clear the login information; otherwise, it means that the tab page is closed and no action is required. It should be noted that the specific clearing logic in the clearLoginInfo function needs to be adjusted according to actual application. This method effectively distinguishes between closing tabs and closing the entire browser in Chrome browser on Windows.

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