How to clear sessionStorage when navigating to another page but not on refresh?

Question

I have some check boxes in one of my webpages, and this page has to refresh every 1 minute for some data consistency issues.

I am using window.sessionStoage to persist the check boxes that have been checked so that the user doesn't lose the boxes already checked on page refresh.

But I want to clear the sessionStorage when the user navigates away from that page ( not necessarily leaving my website, might be going to another page on the same website ), and for the same if I use the onunload event then the storage will be cleared in case of refresh also.

Is there any other event or any workaround that could help me achieve this.

Answer 1

For your particular case window events can be in handy. So you can react to the blur and focus events, so leaving your browser tab will cause blur event.

$(window).blur(function(){
  //clear session
});

$(window).focus(function(){
  //maybe some code to re-init session data
});

Answer 2

May you try to save the path/name of the current page in you session-storage and on each init of your page check if the pagename equals the name in the sessionstorage. If not, you can clear it.