Javascript会话超时以及多个选项卡的弹出警报 [英] Javascript session timeout with popup alert for multiple tabs

问题描述

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

I am using javascript setInterval() to check user idle time and show a popup alert before automatic logout. But it does not work for multiple tabs (working fine for single tab)

以下是我的代码：

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中设置空闲时间，如 -

I am setting the idle time in localStorage like -

localStorage.setItem("idleTimeValue", idleTime);

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

So if I open 3 tabs, setInterval() function will run in all tabs, also idleTime increments by 3 seconds instead of 1 second and time calculations is happening wrongly.

我需要在所有选项卡中显示弹出窗口，然后在一个选项卡中单击继续应该在所有其他选项卡中重新显示。

I need to show popup in all tabs and clicking continue in one tab should reflct in all other tabs.

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

Can anybody suggest a solution for this? Please help guys

推荐答案

谢谢大家，我得到了解决方案。

Thank you guys, I got the solution for this.

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

I used a localStorage value with current time stored in it. If there is no value exists in localStorage["currentTime"], stored current time in 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（currentTime）值完成的。

All calculations to show timeout popup is done using localStorage.getItem("currentTime") value.

然后我将localStorage [currentTime]设置为null如果用户不是空闲（当用户点击某处时）

Then I set localStorage["currentTime"] to null if user is not idle (when user clicks somewhere)

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

这篇关于Javascript会话超时以及多个选项卡的弹出警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！