第一种方式 sessionStorage
我们的软件和政府行业的软件对接,想着半小时不操作,自动清空页面提示一下后,重新退出操作,起初想着用项目的缓存解决,但是尝试了很久才发现,由于是cas单点的原因,一直是清除登录状态后,又重新登录,百般无奈,无法得知何时缓存到期(自己技术不够),因此无法清除request.getUserPrincipal();真是柳暗花明,无意间发现H5的sessionStorage
//采用H5 sessionStorage,保存登录信息的公共js,不采用jquery
var _EXPIRE_TIME = 2*60*1000;//两分钟没有操作,则注销
var _interval_handler=-1;
(function () {
if (isLogin()) {//已登录
//刷新最后使用时间
sessionStorage.setItem("nxgx_lastVisitTime", new Date().getTime());
_interval_handler=setInterval(checkExpired, 10*1000);//10秒钟检查一次,是否超时
}
})();
function checkExpired() {
console.log("10秒检查一次是否过期"+window.location.href+"::"+new Date());
var storeLastTime=sessionStorage.getItem("nxgx_lastVisitTime")?sessionStorage.getItem("nxgx_lastVisitTime"):-1;
if (storeLastTime==-1) clearInterval(_interval_handler);
else {
if ((new Date()).getTime()-storeLastTime>_EXPIRE_TIME) { //过期了
alert("由于您长时间未进行操作,系统已为您自动退出登录");
exit('pc');
//删除sessionStorage信息
//sessionStorage.clear();
//把页头中的已登录部分,改为需要登录的样子
document.location.reload();//刷新当前页面
//退出循环
clearInterval(_interval_handler);
}
}
}
放到项目公共的js中完美的解决了问题
第二种方式 监控鼠标的移动
web 页面自动超时自动退出方法
思路:
使用 mouseover 事件来监测是否有用户操作页面,写一个定时器间隔特定时间检测是否长时间未操作页面,如果是,退出;
具体时间代码如下(js):
mouseover
var lastTime = new Date().getTime();
var currentTime = new Date().getTime();
var timeOut = 10 * 60 * 1000; //设置超时时间: 10分
$(function(){
/* 鼠标移动事件 */
$(document).mouseover(function(){
lastTime = new Date().getTime(); //更新操作时间
});
});
function testTime(){
currentTime = new Date().getTime(); //更新当前时间
if(currentTime - lastTime > timeOut){ //判断是否超时
console.log("超时");
}
}
/* 定时器 间隔1秒检测是否长时间未操作页面 */
window.setInterval(testTime, 1000);