Question

我正在使用javascript setInterval（）检查用户空闲时间并在自动注销前显示弹出警报。但它不适用于多个选项卡（单个选项卡正常工作）

以下是我的代码：

localStorage.removeItem("idleTimeValue");
var idleInterval    = setInterval(timerIncrement, 1000);


function timerIncrement()  
{
    if(localStorage.getItem("idleTimeValue")) {
        idleTime            = parseInt(localStorage.getItem("idleTimeValue")) + 1; //increments idle time by one second
    } else {
        idleTime            = 1;
    }

    localStorage.setItem("idleTimeValue", idleTime);

    var timeDiff            = 600; 
    var totTimeRemaining    = timeDiff-idleTime;


    if(totTimeRemaining > 0) {

                $('#timeoutWindow').modal('show');
                var minutes = Math.floor(totTimeRemaining / 60);
                var seconds = totTimeRemaining - minutes * 60;
                $('#timeoutRemainingTime').html(minutes+" minutes and "+seconds+" seconds");
    } else {
                window.location = httpHost+"/account/index/logout";
    }

}


$(this).click(function (e) 
{
    localStorage.removeItem("idleTimeValue");
    $('#timeoutWindow').modal('hide');
});

我在localStorage中设置空闲时间，如 -

localStorage.setItem("idleTimeValue", idleTime);

因此，如果我打开3个选项卡，setInterval（）函数将在所有选项卡中运行，idleTime也会增加3秒而不是1秒，并且时间计算错误地发生。

我需要在所有标签页面中显示弹出窗口，然后在一个标签页中单击“继续”，则应在所有其他标签页中重新显示。

有人可以为此提出解决方案吗？请帮帮我们

Answer 1

谢谢你们，我得到了解决方案。

我使用了localStorage值，其中存储了当前时间。如果localStorage [＆＃34; currentTime＆＃34;]中没有值，则将当前时间存储在localStorage中。

var currentTime         = new Date();

if ( !(localStorage.getItem("currentTime")) || (localStorage.getItem("currentTime") == "") )
{
        idleTime        = 0;
        setTimeout(function() { localStorage.setItem("currentTime", currentTime)},5000); // current time is set to localStorage after  seconds (it is for setting in multiple tabs)
}

显示超时弹出窗口的所有计算都是使用localStorage.getItem（＆＃34; currentTime＆＃34;）值完成的。

然后我将localStorage [＆＃34; currentTime＆＃34;]设置为null，如果用户没有空闲（当用户点击某处时）

$(this).click(function (e) 
{
    $('#timeoutWindow').modal('hide');
    localStorage.setItem("currentTime", "");
    idleTime = 0;
});

Answer 2

您可以调整以下现有实施，以满足您的要求。

步骤1：设置环境 - 创建唯一的计时器ID以将其与其他计时器隔离

var timerId = 'timer-'+(new Date().getTime());
localStorage.setItem(timerId, '0');
modifyAllIdleTime('0');//i.e resetting all timers

var idleInterval    = setInterval(timerIncrement, 1000);

function timerIncrement(){
    // increament & Set only localStorage.getItem(timerId) so that it will not affect others
    // Add logic to showHide
}

步骤2：修改空闲时间 - 每当需要修改其他计时器实例空闲时间时调用

function modifyAllIdleTime(idleTime) {
    for(var i = 0; i < localStorage.length; i++) {
        if(localStorage.key(i).indexOf('timer-') !== -1) { //if timer instance
            localStorage.setItem(localStorage.key(i), idleTime);
        }
    }
}

步骤3：退出 - 对于任何计时器，只要剩余时间为0，退出所有计时器

modifyAllIdleTime('600');// where 600 is the max allowed idle time in sec
deleteTimer();//call this to cleanup localStorage before navigating user to logout screen

Javascript会话超时以及多个选项卡的弹出警报

2 个答案: