如何检测用户是否正在关闭浏览器或浏览其他网站

Question

我想实现会话处理的方式，如果用户关闭浏览器或选项卡所有会话过期/销毁。但如果用户正在导航到另一个网站，我想保留所有会话。我如何在Nextjs中做到这一点?

Answer 1

您可以为unload事件使用事件侦听器:https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event

但是考虑到你是在React/Next.js领域，你可能想要在useEffect钩子中连接侦听器，如果你要那样做…

…您可以完全跳过事件侦听器，并使用useEffect的return值作为您的"卸载"。处理程序。

正如这里(https://reactjs.org/docs/hooks-effect.html)所解释的，当您从useEffect中return一个函数时，该函数将在组件从页面中删除时被调用。

如果你添加了想要触发的代码"onUnload"在你的"应用程序"上从一个useEffect返回的函数中组件，这将具有与使用卸载事件侦听器相同的效果。

// App.js
import { useEffect}, React from 'react'
App = () => {
useEffect(() => {
return () => {
// add code to trigger when the user leaves here
}
})
}