带有多个选项卡的弹出警报的 Javascript 会话超时

本文介绍了带有多个选项卡的弹出警报的 Javascript 会话超时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用 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; });