如何区分location.reload()和用户主动刷新页面？

Question

希望达到下面的效果，项目中主动调用location.reload()时，不清空sessionStorage的值。

用户刷新的时候，需要清空sessionStorage的值

要怎么实现呢？

Answer 1

在调用 location.reload() 之前，弄一个标记：

sessionStorage.setItem('reloaded', 'true');
location.reload();

if (sessionStorage.getItem('reloaded')) {
  sessionStorage.removeItem('reloaded');
} else {
  sessionStorage.clear();
}

Answer 2

要区分调用 location.reload() 和用户主动刷新页面，可以使用浏览器的 window.performance.navigation.type 属性来判断。这个属性会告诉你当前页面的导航类型，包括用户点击链接、用户按下前进或后退按钮、用户在地址栏中输入 URL、页面刷新等等。其中，导航类型为 0 表示用户通过点击刷新按钮或者按下 F5 键来刷新页面，而导航类型为 1 表示使用 location.reload() 方法刷新页面。

if (window.performance.navigation.type === 0) {
  // 用户刷新页面，清空 sessionStorage
  sessionStorage.clear();
} else if (window.performance.navigation.type === 1) {
  // 代码调用 location.reload()，不清空 sessionStorage
}

Answer 3

另外一个 api 被废弃了，但这个功能还是有的。

参见 PerformanceNavigationTiming: type property