Javascript 如何区分刷新（通过F5/刷新按钮）和关闭浏览器？

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

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

• （这个不稳定）

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

我还找到了一个变通解决方案：

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

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

---

谢谢

您可能需要使用Cookies/window.sessionStorage

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

您可以按照以下方法操作：
1.当用户首次访问页面时创建cookie

document.cookie=“userloggedin=true”或设置
sessionStorage.userLoggedIn=true

2.刷新/关闭并重新打开选项卡后，Cookie将可用，如果Cookie不存在，则表示用户关闭窗口并重新打开它。

同样，在用户关闭浏览器选项卡后，会话存储数据将被删除

希望这有帮助

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）。
Hi@ankit\u sharma我认为本地存储会更好。我认为会话存储会更好：是的，它适合我的情况。在beforeunload上，我设置了标志isUnloadPage，在load事件中，我可以得到这个标志，这样我就可以知道用户只是刷新页面，如果用户关闭浏览器，我的加载功能将无法工作。不知何故，这是一个解决办法。thanks@Ankit我同意你的看法，会话存储数据通常在用户关闭浏览器选项卡后删除。但有一个例外。如果用户在关闭后打开浏览器并恢复了以前打开的选项卡，则不会删除数据。在这种情况下，会话数据将恢复到以前的状态！