How to clear the sessionstorage on browser refresh , but this should not clear on click of browser back button

Question

I want to clear the session storage only on page refresh but not on the browser back button click, or forward click want to implement this using angularjs/javascript

i am saving data in sessionstorage on click of back button so just i want to clear the same data on click of browser refresh button but it should not clear for back

i have tried

if (performance.navigation.type == 1) {
    $window.sessionStorage.clear();
    // clearing the sessionstorage data
}

// but this one is clearing after clicking 2 times on refresh button

if (performance.navigation.type == 0) {
    $window.sessionStorage.clear();
    // clearing the sessionstorage data

}
// this one is clearing for back button as well ,
// tried onbeforeunload, onpopstate as well its not working its clearing for back button too

// please let me know how to implement this one, thanks in advance
// no jquery please

Answer 1

Yes you can achieve this on windows load and then clear the session storage or removing the key

$window.location.reload();
sessionStorage.clear();

OR

// Remove saved data from sessionStorage
 $window.location.reload();    
 sessionStorage.removeItem('key');

Answer 2

You keep the page address that set the sessionStorage and then check it on the onload event. If they are the same, erase the sessionStorage contents.

window.onbeforeunload = function(){
    sessionStorage.setItem("origin", window.location.href);
}

Then in the onload event:

window.onload = function(){
    if(window.location.href == sessionStorage.getItem("origin")){
        sessionStorage.clear();
    }
}

Answer 3

Try to use $stateChangeStart event

$rootScope.$on('$stateChangeStart', function(event, toState, fromState){  
   if(toState.name === fromState.name){
     $window.sessionStorage.clear();
   }
})

Hope this will help!!

Answer 4

You can use beforeunload

window.addEventListener("beforeunload", function(e) {
  sessionStorage.removeItem("{session}");
}); 

or set it as null

window.addEventListener("beforeunload", function(e) {
  sessionStorage.setItem("{session}",null);
});