javascript - 使用 Javascript 进行用户 session 管理

Question

我的应用程序中有一个 session 计时器，用于检查用户是否在特定时间内处于空闲状态。下面是我的代码。

var sessionTimeout;
window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
// I have some more dom events here

function logout() {
    alert("You are now logged out.")
    //location.href = 'logout.php'
}
function resetTimer() {
    clearTimeout(sessionTimeout);
    sessionTimeout = setTimeout(logout, 30000)
}

如果用户同时打开两个选项卡并保持一个选项卡空闲而其他选项卡不空闲，则他将在超时期限后注销，因为计时器将在不处于焦点的另一个选项卡中运行。有什么办法可以处理这个问题吗？我认为 Javascript 无法访问其他选项卡中的数据。那么是否有特定于浏览器的全局超时适用于所有选项卡，以便在任何选项卡不空闲时 session 将处于事件状态？谁能提出解决方案吗？

Answer 1

您可以使用 BroadcastChannel 在选项卡之间进行通信并完成此操作。请参阅https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel

可能的解决方案伪代码如下所示

var sessionTimeout;
var bc = new BroadcastChannel('session_channel');
window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeypress = resetTimer;
bc.onmessage = resetTimer;
// I have some more dom events here

function logout() {
   alert("You are now logged out.")
   //location.href = 'logout.php'
}
function resetTimer() {
   bc.postMessage('activity');
   clearTimeout(sessionTimeout);
   sessionTimeout = setTimeout(logout, 30000)
}

因此，每次选项卡中有事件时，它都会通知所有其他选项卡，因此它们也会更新计时器。

但请记住，旧版浏览器不支持broadcastChannel，因此请查看支持表，如果需要，请使用 localStorage 实现回退以共享事件状态