如何区分刷新（按 F5/刷新按钮）和关闭浏览器？答案

【问题标题】：How to distinguish between refresh (by F5/refresh button) and close browser?如何区分刷新（按 F5/刷新按钮）和关闭浏览器？
【发布时间】：2018-01-09 03:10:56
【问题描述】：

我需要处理浏览器上的事件，例如跨浏览器上的返回、刷新和关闭。问题是我的客户希望每个事件都有不同的逻辑。对于后退按钮，这个解决方案非常好：

https://stackoverflow.com/a/36786695/3462243

但是现在很难区分刷新和关闭，我发现的所有解决方案都是关于使用“beforeunload”事件：

对于 F5 刷新，我可以捕捉键盘上的事件，但是当用户按下浏览器上的刷新按钮时，我不能。如果我使用“beforeunload”，则与关闭浏览器事件相同。

我还找到了一个解决方法：

但不幸的是，我想做的是在页面卸载之前显示消息（在浏览器关闭时显示，但在刷新时不显示）

有谁知道它的解决方案（跨浏览器）

谢谢

【问题讨论】：

标签： javascript jquery cross-browser

【解决方案1】：

您可能想要使用 Cookies/window.sessionStorage。

您可以设置一个没有明确过期日期的 cookie，以便它仅可用于当前会话（在用户关闭浏览器窗口之前有效）。
您也可以使用 sessionStorage 对象，它只存储一个会话的数据。当用户关闭特定浏览器选项卡时，数据将被删除。

你可以按照这个方法：
1.当用户第一次访问页面时创建一个cookiedocument.cookie = "userloggedin=true";或设置sessionStorage.userLoggedIn = true;

2.Cookie 将在刷新/关闭并重新打开选项卡后可用，如果 cookie 不存在则意味着用户关闭窗口并重新打开它。
同样，用户关闭浏览器选项卡后 sessionStorage 数据将被删除

希望这会有所帮助！

【讨论】：

嗨 @ankit_sharma 我认为 localStorage 会更好
我认为 sessionStorage 会更好：P
是的，它适用于我的情况。在 beforeunload 上我设置了标志 isUnloadPage，在加载事件时我可以获得这个标志，所以我可以知道用户只是刷新页面，如果用户关闭浏览器，我的加载功能将不起作用。不知何故，这是解决方法。谢谢
@Ankit 我同意你的观点，sessionStorage 数据通常在用户关闭浏览器选项卡后被删除。但是有一个例外。如果用户在关闭后打开浏览器并恢复了之前打开的选项卡，则不会删除数据。在这种情况下会话数据恢复到之前的状态！

【解决方案2】：

tabOrBrowserStillAliveInterval;

constructor() {
  // do some action if the browser or last opened tab was closed (in 15sec after closing)
  if (this.wasBrowserOrTabClosed()) {
    // do some action
  }

  // every 15sec update browserOrTabActiveTimestamp property with new timestamp
  this.setBrowserOrTabActiveTimestamp(new Date());
  this.tabOrBrowserStillAliveInterval = setInterval(() => {
    this.setBrowserOrTabActiveTimestamp(new Date());
  }, 15000);
}

setBrowserOrTabActiveTimestamp(timeStamp: Date) {
  localStorage.setItem(
    'browserOrTabActiveSessionTimestamp',
    `${timeStamp.getTime()}`
  );
}

wasBrowserOrTabClosed(): boolean {
  const value = localStorage.getItem('browserOrTabActiveSessionTimestamp');

  const lastTrackedTimeStampWhenAppWasAlive = value
    ? new Date(Number(value))
    : null;
  const currentTimestamp = new Date();
  const differenceInSec = moment(currentTimestamp).diff(
    moment(lastTrackedTimeStampWhenAppWasAlive),
    'seconds'
  );

  // if difference between current timestamp and last tracked timestamp when app was alive
  // is more than 15sec (if user close browser or all opened *your app* tabs more than 15sec ago)
  return !!lastTrackedTimeStampWhenAppWasAlive && differenceInSec > 15;
}

它是如何工作的：如果用户关闭浏览器或关闭所有打开的您的应用选项卡，则在 15 秒超时后 - 您期望的操作将被触发。

它适用于打开多个窗口
服务器上没有额外的负载
F5/刷新没问题

浏览器限制是我们在注销前需要 15 秒超时的原因。由于浏览器无法区分这些情况：浏览器关闭、选项卡关闭和选项卡刷新。所有这些动作都被浏览器视为相同的动作。所以 15 秒超时就像一种解决方法，只捕获浏览器关闭或关闭所有打开的您的应用选项卡（并跳过刷新/F5）。

【讨论】：