HTML5 sessionStorage会话存储,实现页面半小时不操作自动提示和退出

第一种方式 sessionStorage 


我们的软件和政府行业的软件对接,想着半小时不操作,自动清空页面提示一下后,重新退出操作,起初想着用项目的缓存解决,但是尝试了很久才发现,由于是cas单点的原因,一直是清除登录状态后,又重新登录,百般无奈,无法得知何时缓存到期(自己技术不够),因此无法清除request.getUserPrincipal();真是柳暗花明,无意间发现H5的sessionStorage


 HTML5 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);

猜你喜欢

转载自blog.csdn.net/qq_35275233/article/details/84193044