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

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

思路分析:

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

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

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

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

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

代码如下:

//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();

你可能感兴趣的:(JavaScript,前端,javascript)