Determine the difference between updating and rebooting

Question

I filled out a form containing my full name and address. When I press ⌘R, the page refreshes, but the form still contains the data that I filled out.

When I reload a webpage using the reload button in the upper left corner of Google Chrome, the form will be blank.

How can I detect this difference with JavaScript (or jQuery)?

---

I tried this:

$(window).on('load', function(){

     localStorage.setItem('gForm_isDone', '{"0":false,"1":false,"2":false,"3":false,"4":false,"5":false,"6":false,"7":false,"8":false,"9":false,"10":false,"11":false}');
     console.log('localStorage emptied');

     console.log(localStorage.getItem('gForm_isDone'));

});

In my scenario, I want to clear localStorage, but only when the page reloads, not when refreshing.

Answer 1

use the function window.onbeforeunloadto check if refresh / reload is pressed and the event is being processedlocalStorage.clear()

window.onbeforeunload = function(){
 var message = 'Are you sure you want to reload?';
  if (typeof evt == 'undefined') {
    evt = window.event;
  }
  if (evt) {
    evt.returnValue = message;
  }
  return message;
}

Answer 2

if (window.performance) {
  console.info(performance.navigation.type); 
}

0 1. 0 . 1 , ctrl+R .

 if (window.performance) {
  console.info("window performance work on browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded or just called with empty cache");
  }