Тайм-аут сеанса Javascript с всплывающим предупреждением для нескольких вкладок

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 ["currentTime"] нет значения, сохраняется текущее время в 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").

Тогда я поставил LocalStorage [ "CURRENTTIME"] к нулю, если пользователь не простаивает (когда пользователь щелкает где-нибудь)

$(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: Изменение Idle Time - вызов всякий раз, когда другой экземпляр таймера времени простоя необходимо модифицировать

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 для любого из тима er

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