Question

我有一个代码需要运行一个倒数计时器，即使他/她离开页面，计数器也需要为每个用户倒数15分钟。这是Cookie的初始化行：

document.cookie = "name=timerCookie; timeLeft=" + initialTime + "; expires=" + expires;

这就是我更新cookie的方式：

document.cookie = "name=timerCookie; timeLeft=" + timeLeft + "; expires=" + expires;

当我尝试读取cookie时，我得到“ name = timerCookie”

我可以正确设置Cookie吗？我可以这样使用cookie吗？

编辑****：显然，通过删除已解决问题的名称值，cookie只能包含1个细分（aka timeLeft）。

Answer 1

好吧，我在脱机时以及在了解您的用例实际是什么之前，提出了此解决方案。
我想使用localStorage会更好，因为MDN表示：
“ Cookie曾经用于一般的客户端存储。当它们是在客户端上存储数据的唯一方法时，它是合法的现在推荐使用现代存储API。”

由于您的服务器需要了解用户的“剩余时间”，因此您可能毕竟需要cookie（除非您可以让浏览器在unload时更新服务器），但是也许您可以适应这种想法达到您的目的。

我还认为“即使他/她离开了页面”，也意味着计时器应该在他们不在时继续滴答作响-但这一部分应该相对容易固定。

我将其包含为HTML（以便复制/粘贴），因为SO片段已被沙盒化，并且不会运行使用localStorage的代码。

<!DOCTYPE html><html><head></head><body>
  <p id="display">__:__</p>
<script>

  let expires = localStorage.getItem("expires"); // Gets the stored expiration time
  const display = document.querySelector("#display"); // Identifies our HTML element
  // Makes a helper function to treat dates as accumulated seconds
  const getSecondsSinceEpoch = ((date) => Math.floor(date.getTime()/1000));

  // Sets the expiration time if countdown is not already running
  if(!expires){
    expires = getSecondsSinceEpoch(new Date()) + (60 * 15); // 15 minutes from now
    localStorage.setItem("expires", expires);
  }

  // Calculates how long until expiration
  let pageLoadedAt = getSecondsSinceEpoch(new Date());
  let secondsRemaining = parseInt(expires) - pageLoadedAt; 

  // Starts the countdown (which repeats once per second)
  setInterval(countdown, 1000);

  function countdown(){
    // When time expires, stops counting and clears storage for the user's next visit
    if(secondsRemaining === 0){
      clearInterval();
      localStorage.clear(); // You don't want this here -- it resets the clock
    }
    else{
      // Until time expires, updates the display with reduced time each second
      display.textContent = formatTime(--secondsRemaining);
    }
  }

  function formatTime(time){
    let mins = Math.floor(time/60).toString();
    let secs = Math.floor(time%60).toString();
    secs = secs.length == 2 ? secs : "0" + secs; // Ensures two-digit seconds
    return `${mins}:${secs}`
  }

</script>
</body></html>

如何使用更改的参数初始化Cookie

1 个答案: