【通过javascript实现：长时间未对html页面操作，自动退出系统，返回至login.html】

Fly ☆2024-01-07 6:05

功能：针对某html页面，如果长时间没有对页面进行任何操作，则退出系统，返回至login.html

思路分析：

step1 设置超时时间：timeoutDuration=10分钟，因为是以毫秒为单位，所以需要乘以1000

step2 设置超时后做的一系列操作：logout()

step3 设置超时函数：setTimeout(logout, timeoutDuration)，超过10分钟，触发

step4 设置重置超时函数：resetTimeout()，当页面有鼠标操作时，需要清除先前的超时函数，重新设置超时函数

step5 监听页面操作，触发重置：mousemove鼠标移动，keydown键盘点击，click窗口点击

代码如下：

javascript 复制代码

//step1 设置超时时间
let timeoutDuration = 10 * 60 * 1000;  //10min
//step2 超时后做的操作
function logout(){
    localStorage.clear();        //清除本地存储（如果用到setItem，可进行操作，也可省略该步）
    location.href = 'login.html';  //跳转login.html
}
//step3 设置超时函数
let timeout = setTimeout(logout, timeoutDuration);
//step4 设置重置超时函数
function resetTimeout(){
    clearTimeout(timeout);
    timeout = setTimeout(logout, timeoutDuration);  
}
//step5 监听页面操作，触发重置超时函数
window.addEventListener("mousemove", resetTimeout);
window.addEventListener("keydown", resetTimeout);
window.addEventListener("click", resetTimeout);
resetTimeout();