How to remove localstorage or session storage data when I close browser. How to delete details of localstoge when closing the last tab of the browser's website when multiple tabs are open?, I have tried many solutions but localstorage is cleared even while refreshing the page.

How to remove localstorage or session storage data when I close browser. How to delete details of localstoge when closing the last tab of the browser's website when multiple tabs are open?, I have tried many solutions but localstorage is cleared even while refreshing the page.

• javascript
• node.js
• reactjs
• angular
• browser

3 Answers 3

To remove local storage from the browser you need to bind the event called 'beforeunload', this event will be triggered by closing the tab and killing the browser. you can find more about the event HERE

See this answer here

You can use

window.addEventListener("beforeunload", function(e){
   // clean localStorage here
}, false);

You have 5 methods for localStorage:

Storage.setItem():

The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists.

Storage.getItem():

The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.

Storage.removeItem():

The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. The Storage interface of the Web Storage API provides access to a particular domain's session or local storage.

Storage.clear():

The clear() method of the Storage interface clears all keys stored in a given Storage object.

Storage.key():

The key() method of the Storage interface, when passed a number n, returns the name of the nth key in a given Storage object. The order of keys is user-agent defined, so you should not rely on it.

I think that the best solution for you would be using either: Storage.clear() or Storage.removeItem() method. I will explain along with the code in the ments which method are better for you.

Here is the code solution that might help you:

function cleanStorage() {
    // Place any cleanup logic you want here:
    // window.localStorage.removeItem('your-selected-item-1')
    // window.localStorage.removeItem('your-selected-item-2')
    // ...
    // This would delete only selected key or multiple keys 
    // with data inside. For example window.localStorage.removeItem('openedTabs') 
    // would remove oponedTabs count from functions below.

    // METHOD YOU PROBABLY WANT TO USE:
    localStorage.clear();

    // as mentioned above: 
    // The clear() method of the Storage interface clears 
    // all keys stored in a given Storage object.
}

// Use JSON.parse to count opened tabs
function openedTab() {
    const openedTabs = JSON.parse(window.localStorage.getItem('openedTabs'))
    if (openedTabs=== null) {
        window.localStorage.setItem('openedTabs', 1)
    } else {
        window.localStorage.setItem('openedTabs', ++openedTabs)
    }
}

// Use JSON.parse to count closed tabs
function closedTab() {
    const tabs = JSON.parse(window.localStorage.getItem('openedTabs'))
    if (openedTabs === 1) {
        // detects that the last tab and fires cleanStorage() function
        window.localStorage.removeItem('openedTabs')
        cleanStorage()
    } else {
        window.localStorage.setItem('openedTabs', --openedTabs)
    }
}

// start collecting opened tabs count to the same localStorage as a key you 
// will be clearing later.
window.onload = function() {
    openedTab();
}

// when user is about to close tab invoke function that will count closing tabs
window.onbeforeunload = function() {
    closedTab();
}

P.S - You may also want to think about using sessionStorage along with the localStorage. It depends on what you are trying to do with your code.