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