How to clear localStorage on browser close?

Question

I need my localStorage to be cleared when browser is closed.

I need shared space for data between tabs and windows with common origin (protocol, domain, port). For example, group of tabs and windows with https://www.reddit.com opened. So sessionStorage is not an option.
I need localStorage to be cleared when browser is closed. Event beforeunload works only when tab is closed. But when entire browser is closed, this event doesnt fire for every opened tab. So storage is not purged.

So I need some hybrid of localStorage and sessionStorage.

Good old fashioned cookies should be able to do what you describe. Just create the cookies without an expiry date and they will only stick around for the duration of the browser session. They're not quite as nice as the local/session storage but you can read the value across pages. — Daniel Black, Aug 17 '22 at 19:56

score 0 · Answer 1 · answered Aug 17 '22 at 20:30

Yo can try this solution of clearing the local storage when opening the browser instead of when closing it. Start by checking if there is a value in session storage and if not clear the local storage and then sets a value for the session storage.This will avoid clearing of local storage in future when carring out page refresh.

const  clearStorage = () =>  {
    let session = sessionStorage.getItem('value');
    if (session == null) {
        localStorage.removeItem('remove');
    }
    sessionStorage.setItem('value', 1);
}
window.addEventListener('load', clearStorage);

score 0 · Answer 2 · answered Aug 17 '22 at 20:54

Don't clear local storage when the browser is closed , because of many reasons for example the electric power stopped and user couldn't close the browser correctly …
So as a solution i suggest :

1- Manually :
you add a variable to check if a local storage is valide or is a left over from other sessions by an expired updated_at variable

2- Using session unique identifier :
if you are using php you should be able to identify every session using session id
So if you have :

<script>
 var sessionId = "<?php echo session_id(); ?>" ;

 if( localStorage.getItem("session_id") === sessionId){// getter
 //stayed opened a tab/window in same session

 }else{ 

 // browser closed detected


 //register new session id
  localStorage.setItem("session_id", sessionId);// setter

 // here you can remove Old data or add new !


 }

</script>

Having a unique id for each browser session solves the problem perfectly

3- Using a cookie :
According to some comments and this answer
. You can use cookies that expires when: broswer closes / session ends witch ... has the downside of being unpredictable ...

 document.cookie = "key=value; path=/";// do not specify a expiring date 
 // in order for this to get destroyed with session

You can see the problems of this solution here

How to clear localStorage on browser close?

2 Answers2