JavaScript上的本地存储导致刷新

Question

我正在尝试在空闲时启动用户，跨选项卡使用 javascript，下面的代码适用于单个选项卡的多个选项卡，它无法正常工作

例如：我将 10 秒设置为空闲时间，并在 10 秒内离开第一个选项卡，它抛出用户，假设我在 00：00：05 小时打开第一个选项卡，在 00：00：10 小时打开第二个选项卡，并在第二个选项卡上工作 00：00：13 小时，并留下两个选项卡，项目必须在 00：00：23注销，对吗？ 但它在 00：00：15注销，我不知道这里发生了什么，如果它没有正确刷新，当我使用它时，它怎么会在第二个选项卡上停留很长时间？如果它正在正确刷新，它如何根据第一个打开的选项卡和代码将我注销，如下所示。

<script>
var IDLE_TIMEOUT = 10; //seconds
localStorage.setItem("setTimeOut", "0");
document.onclick = function () {    
localStorage.setItem("setTimeOut", "0");
};
document.onmousemove = function () {   
localStorage.setItem("setTimeOut", "0");
};
document.onkeypress = function () {  
localStorage.setItem("setTimeOut", "0");
};
document.onfocus = function () {  
localStorage.setItem("setTimeOut", "0");
};

window.setInterval(CheckIdleTime, 1000);
function CheckIdleTime() {  
localStorage.setItem("setTimeOut", parseInt(localStorage.getItem("setTimeOut"))+1);
if (localStorage.getItem("setTimeOut") >= IDLE_TIMEOUT) {
alert('Times up!, You are idle for about 15 minutes, Please login to continue');
document.location.href = "logout.php";
}
}
</script>

Answer 1

与其在每个选项卡上每秒增加值，这意味着每秒都会随着打开的选项卡数量而不是 1 秒而增加，只需设置交互的当前时间，然后每秒与之进行比较。

因此，在事件处理程序中，改为执行以下操作：

localStorage.setItem("lastInteraction", Date.now())

。然后在CheckIdleTime()函数中，删除localStorage.setItem()并将if条件更改为：

Number(localStorage.getItem("lastInteraction")) + (IDLE_TIMEOUT * 1000) < Date.now()

该条件采用上次交互发生的时间，添加超时常量，然后检查当前时间(现在(是否已超过该值。

Answer 2

此行将针对应用的每个实例(选项卡(每秒运行一次。这意味着，如果您打开了 2 个选项卡，则它每秒递增 2 而不是 1。

localStorage.setItem("setTimeOut", parseInt(localStorage.getItem("setTimeOut"))+1);

您可以通过使用用户注销的特定时间(而不是倒计时(来解决此问题。