检测刷新和重新加载之间的区别答案

【问题标题】：Detect difference between refresh and reload检测刷新和重新加载之间的区别
【发布时间】：2018-01-16 23:02:26
【问题描述】：

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

当我通过谷歌浏览器左上角的重新加载按钮重新加载网页时，表单将为空。

如何使用 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，但仅在页面重新加载时，而不是在刷新时。

【问题讨论】：

我无法重现这种行为（对我来说，它总是在 chrome 上被清除，从不在 FF 上），但你不能只检查输入是否有一些价值吗？
嗯，这真是个好主意！我真的很好奇是否有另一种方法（感觉不太像解决方法）来检查它，但在这种情况下它可以很好地工作！感谢您的宝贵意见！ :)

标签： javascript jquery html browser reload

【解决方案1】：

使用window.onbeforeunload函数检查是否按下了刷新/重新加载并处理了事件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;
}

【讨论】：

【解决方案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");
  }

【讨论】：

但是硬刷新和简单刷新没有区别。（尽管此评论可能仅适用于 FF，因为我无法在 chrome 上进行测试：我无法重现 OP 的行为）
硬刷新会导致你清空缓存，而简单的刷新通常不会。
很漂亮，它并没有真正检查你是如何重新加载的，只有在网页加载后缓存被清空了
我现在正在测试它的浏览器兼容性，但感觉有点问题
它甚至不知道缓存是否已被清空（至少在我的 FF 上没有）它只会告诉我们是否来自不同的页面。