判断Session的过期时间 采用JavaScript实时显示剩余多少秒

判断Session的过期时间，一般可以采用服务器端的方法或客户端的方法，本文主要介绍采用JavaScript实时显示剩余多少秒的客户端实现方法。

准备工作

在实现过程中，需要获取Session的过期时间和当前时间，所以需要在服务器端将Session的过期时间存入到前端，可以将过期时间存入到一个隐藏域中。

代码示例：

<input type="hidden" id="expire_time" value="<?php echo $expire_time;?>"/>

实时判断Session过期时间

通过JavaScript来实现实时判断Session的过期时间，可以使用定时器setInterval函数每秒钟调用一次判断函数，来更新显示剩余的秒数。

代码示例：

// 获取过期时间
var expire_time = document.getElementById('expire_time').value;
// 定时器每秒执行函数
setInterval(function(){
    // 获取当前时间
    var now_time = Math.round(new Date().getTime()/1000);
    // 计算剩余时间
    var remain_time = parseInt(expire_time - now_time);
    // 如果过期，跳转到登录页
    if(remain_time<=0){
        window.location.href = '/login';
        return false;
    }
    // 显示剩余时间
    document.getElementById('remain_time').innerHTML = remain_time;
},1000);

上面的代码中，通过计算当前时间与过期时间的差值，得到Session的剩余时间，并更新到前端页面的相应元素中，如果Session已经过期，则跳转到登录页面。

示例说明

示例1:

假设过期时间为2022年1月1日23时59分59秒，利用PHP来获得此过期时间戳，然后存入到一个隐藏域的value属性中：

<?php
$expire_time = strtotime('2022-01-01 23:59:59');
?>
<input type="hidden" id="expire_time" value="<?php echo $expire_time;?>"/>

该段代码可以通过PHP的date()函数格式化输出当前时间戳：

<?php
echo date('Y-m-d H:i:s');
?>

示例2:

我们也可以利用session的cookie来实现该功能，具体步骤如下：

1. 在生成session_id()之前，设置session.cookie_lifetime的值：

<?php
session_set_cookie_params(600); // 10分钟
session_start();
?>

1. 在前端页面中使用JavaScript定时器服务，连接 HttpOnly session cookie 服务器端获取过期时间，然后计算并显示剩余秒数：

function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

var lastSeconds = parseInt(60 * getCookie("PHPSESSID_lifetime"));

setInterval(function(){
    if(!lastSeconds){return;}
    lastSeconds--;
    document.getElementById("lastSeconds").innerHTML = lastSeconds;
    if(lastSeconds==0){
        alert("Session过期")
    }
}, 1000);

这样我们就可以通过设置cookie时间来定时更新会话过期时间，然后再通过JavaScript来定时判断，实现实时显示剩余秒数了。