当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 seconds

function 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:&nbsp;test=value;&nbsp;Path=/;&nbsp;Expires=Sat,&nbsp;28&nbsp;Mar&nbsp;2020&nbsp;12:48:58&nbsp;GMT;在 HTTP 响应中到达此标头后，可以检索 cookie，document.cookie但没有到期日期。另一方面，此标头是可检索的：X-Whatever-Name-You-Want:&nbsp;test=value;&nbsp;Path=/;&nbsp;Expires=Sat,&nbsp;28&nbsp;Mar&nbsp;2020&nbsp;12:48:58&nbsp;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() {&nbsp; &nbsp; var milliseconds_left = (new Date()).getTime()-expires*1000;&nbsp; &nbsp; if (milliseconds_left<=0) {&nbsp; &nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; &nbsp; &nbsp; $.get('logout.php?reason=idle').complete(function() {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.location.href = '/';&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; &nbsp; else if (milliseconds_left<=60000) {&nbsp; &nbsp; &nbsp; &nbsp; var messageBox = document.getElementById('messageBox');&nbsp; &nbsp; &nbsp; &nbsp; messageBox.innerHTML = "Your session will expire in "+(milliseconds_left/1000)+" seconds.";&nbsp; &nbsp; }}, 1000);倒计时是一个不同的问题。您可能想要创建一个带有扩展按钮的灯箱。