当cookie即将过期时发出警报jquery

Question

使用 cookie，我试图只显示一条警告消息和一条闪烁的状态消息，表明 cookie 将像倒计时一样过期，给他们 60 秒的点击时间，延长它，如果他们不点击链接，它将导航到过期的href链接。并将使 cookie 过期。<script>//the function IdleToLong will be called after 30seconds. //This means if the page reloads, it starts over.setTimeout(IdleToLong, 30 * 1000); // 30 secondsfunction IdleToLong() {  alert('Move your ass');  //If you also need to logout in PHP then you must notify the server that a user has been idle to long.  $.get('logout.php?reason=idle').complete(function() {      window.location.href = '/';  });}</script>上面的代码有效，但它不会显示类似从 60 倒计时到 0 的消息，在该警报中，如果他们单击、扩展、扩展 cookie，否则注销，但该警报应该只在每 3 小时后出现，因为我我将其设置为 3 小时并将其延长 3 小时

Answer 1

这不是那么简单，JavaScript 无法在document.cookieAPI 或Response对象中检索 Cookie 的过期时间，以防fetch或XMLHttpRequest。因此，您必须在可读的标头（或正文）中提供来自后端的令牌。然后，您将能够使用一些简单的逻辑在 JavaScript 中编写倒计时代码。

举个更具体的例子，这个标头在 JavaScript 中是不可检索的：

Set-Cookie: test=value; Path=/; Expires=Sat, 28 Mar 2020 12:48:58 GMT;

在 HTTP 响应中到达此标头后，可以检索 cookie，document.cookie但没有到期日期。

另一方面，此标头是可检索的：

X-Whatever-Name-You-Want: test=value; Path=/; Expires=Sat, 28 Mar 2020 12:48:58 GMT;

因此，您可以在自定义标头中提供 Cookie，以便使用带有过期日期的 JavaScript 检索它。

Answer 2

当用户访问您的网站并且您设置了 cookie 时，您应该设置第二个 cookie，其中包含第一个 cookie 的到期日期。然后使用 JavaScript，您可以从当前时间中减去到期日期的值，以获得您的 setTimeout 值。

PHP：

$cookie_max_age = [number of seconds];

$cookie_expires = time()+$cookie_max_age;

$cookie_value = rawurlencode("[cookie value]");

header("set-cookie: [cookie name]=$cookie_value; max-age=$cookie_max_age", false);

header("set-cookie: expires=$cookie_expires; max-age=$cookie_max_age", false);

JavaScript：

var expires = parseInt(('; '+document.cookie).split('; expires=')[1]);

var interval = setInterval(function() {

    var milliseconds_left = (new Date()).getTime()-expires*1000;

    if (milliseconds_left<=0) {

        clearInterval(interval);

        $.get('logout.php?reason=idle').complete(function() { 

            window.location.href = '/';

        });

    }

    else if (milliseconds_left<=60000) {

        var messageBox = document.getElementById('messageBox');

        messageBox.innerHTML = "Your session will expire in "+(milliseconds_left/1000)+" seconds.";

    }

}, 1000);

倒计时是一个不同的问题。您可能想要创建一个带有扩展按钮的灯箱。