How to delete a localStorage item when the browser window/tab is closed?

How to delete a localStorage item when the browser window/tab is closed?

My Case: localStorage with key + value that should be deleted when browser is closed and not single tab.
Please see my code if its proper and what can be improved:
//create localStorage key + value if not exist
if(localStorage){
localStorage.myPageDataArr={“name”=>”Dan”,”lastname”=>”Bonny”};
}

//when browser closed – psedocode
$(window).unload(function(){
localStorage.myPageDataArr=undefined;
});

Solutions/Answers:

Solution 1:

should be done like that and not with delete operator:

localStorage.removeItem(key);

Solution 2:

Use with window global keyword:-

 window.localStorage.removeItem('keyName');

Solution 3:

You can make use of the beforeunload event in JavaScript.

Using vanilla JavaScript you could do something like:

window.onbeforeunload = function() {
  localStorage.removeItem(key);
  return '';
};

That will delete the key before the browser window/tab is closed and prompts you to confirm the close window/tab action. I hope that solves your problem.

NOTE: The onbeforeunload method should return a string.

Solution 4:

You should use the sessionStorage instead if you want the key to be deleted when the browser close.

Solution 5:

Try using

$(window).unload(function(){
  localStorage.clear();
});

Hope this works for you

Solution 6:

There is a very specific use case in which any suggestion to use sessionStorage instead of localStorage does not really help.
The use-case would be something as simple as having something stored while you have at least one tab opened, but invalidate it if you close the last tab remaining.
If you need your values to be saved cross-tab and window, sessionStorage does not help you unless you complicate your life with listeners, like I have tried.
In the meantime localStorage would be perfect for this, but it does the job ‘too well’, since your data will be waiting there even after a restart of the browser.
I ended up using a custom code and logic that takes advantage of both.

I’d rather explain then give code. First store what you need to in localStorage, then also in localStorage create a counter that will contain the number of tabs that you have opened.
This will be increased every time the page loads and decreased every time the page unloads. You can have your pick here of the events to use, I’d suggest ‘load’ and ‘unload’.
At the time you unload, you need to do the cleanup tasks that you’d like to when the counter reaches 0, meaning you’re closing the last tab.
Here comes the tricky part: I haven’t found a reliable and generic way to tell the difference between a page reload or navigation inside the page and the closing of the tab.
So If the data you store is not something that you can rebuild on load after checking that this is your first tab, then you cannot remove it at every refresh.
Instead you need to store a flag in sessionStorage at every load before increasing the tab counter.
Before storing this value, you can make a check to see if it already has a value and if it doesn’t,
this means you’re loading into this session for the first time, meaning that you can do the cleanup at load if this value is not set and the counter is 0.