Javascript session timeout with warning popup for multiple tabs
I am using javascript setInterval () to check for user idle time and show a popup warning before auto-logging out. But it doesn't work for multiple tabs (works great for one tab)
Below is my code:
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');
});
I am setting the idle time in localStorage as -
localStorage.setItem("idleTimeValue", idleTime);
So, if I open 3 tabs, the setInterval () function will run in all tabs, and the idleTime is incremented by 3 seconds instead of 1 second, and the timing is not calculated correctly.
I need to show a popup in all tabs and click Continue on one tab to reflect all the other tabs.
Can anyone suggest a solution for this? Help guys
source to share
Thanks guys, I got a solution for this.
I used the localStorage value with the current time stored in it. If there is no value in localStorage ["currentTime"], the current time is stored 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)
}
All calculations for displaying the timeout popup are done using the value localStorage.getItem ("currentTime").
Then I set localStorage ["currentTime"] to null unless the user is idle (when the user clicks somewhere)
$(this).click(function (e)
{
$('#timeoutWindow').modal('hide');
localStorage.setItem("currentTime", "");
idleTime = 0;
});
source to share
You can customize your existing implementation as shown below to meet your requirements.
Step 1: setup environment . Create a unique timer identifier to isolate it from other timers.
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
}
Step 2: Change Downtime - Call when you need to change the downtime of the timer.
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);
}
}
}
Step 3: Exit - Exit the entire timer when the remaining time comes to 0 for any of the timers
modifyAllIdleTime('600');// where 600 is the max allowed idle time in sec
deleteTimer();//call this to cleanup localStorage before navigating user to logout screen
source to share