使用JavaScript的用户会话管理

Question

我的应用程序中有一个会话计时器，该计时器检查用户是否在特定时间内闲置。以下是我的代码。

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无法在其他选项卡中访问数据。因此，是否有适用于所有选项卡的浏览器特定于浏览器的全局超时，以便如果没有任何标签，则会话会处于活动状态？谁能建议解决方案？

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)
}

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

，但请记住，较旧的浏览器不支持广播渠道，因此请查看支持表，如果需要，请使用LocalStorage实施后备，以共享活动状态