javascript - Detect difference between refresh and reload - Stack Overflow

admin管理员组

文章数量:1400188

I have filled in a form containing my full name and address. When I hit ⌘R, the page refreshes, but the form is still containing the data I filled in.

When I reload the webpage via the reload button on the top left of Google Chrome, the form will be empty.

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

---

I have 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 empty the localStorage, but only when the page reloads, not when it refreshes.

I have filled in a form containing my full name and address. When I hit ⌘R, the page refreshes, but the form is still containing the data I filled in.

When I reload the webpage via the reload button on the top left of Google Chrome, the form will be empty.

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

---

I have 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 empty the localStorage, but only when the page reloads, not when it refreshes.

• javascript
• jquery
• html
• browser
• reload

Share Improve this question Follow asked Aug 9, 2017 at 7:27 Maarten WolfsenMaarten Wolfsen 1,73344 gold badges2222 silver badges4040 bronze badges 2

• 1 I can't reproduce this behavior (for me it's always cleared on chrome and never on FF), but can't you just check if the inputs have some value ? – Kaiido Commented Aug 9, 2017 at 7:34
• Hmm, that's quite a good idea! I am really curious if there is another way (something that feels less like a workaround) to check it, but in this case it could work very well! Thanks for the valuable input! :) – Maarten Wolfsen Commented Aug 9, 2017 at 7:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

use window.onbeforeunload function to check if refresh/reload is pressed and handled the event localStorage.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;
}

One possible way is to detect the performance of the window using

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

It will return 0 or 1. 0 for page is not reloaded or called with empty cached. 1 will tell us that page is refreshed using ctrl+R or using browser button.

 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");
  }

本文标签： javascriptDetect difference between refresh and reloadStack Overflow