检测刷新和重新加载之间的差异

Question

我已经填写了包含我的全名和地址的表格。当我按下 ⌘R 时，页面刷新了，但表单仍然包含我填写的数据。

当我通过 Google Chrome 左上角的重新加载按钮重新加载网页时，表单将是空的。

如何检测 JavaScript（或 jQuery）的差异？

我试过这个：

$(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'));

});

在我的场景中，我想清空 localStorage，但仅在页面重新加载时清空，而不是在刷新时清空。

Answer 1

一种可能的方法是使用

检测 window 的性能

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

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

Answer 2

使用window.onbeforeunload函数检查refresh/reload是否被按下并处理事件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;
}

检测刷新和重新加载之间的差异

Detect difference between refresh and reload

html

javascript

browser

jquery

reload