刷新网页时如何防止倒数计时器重置？

Question

我正在设计一个网站，我使用 JavaScript 集成了一个 5 分钟的倒计时计时器，该计时器在加载网页时启动。但是，由于我更像是一名设计师而不是开发人员，所以我不知道如何编辑 JavaScript 代码以使其在重新加载网页时计时器不会重新启动。我知道我必须存储用户 cookie，并且我已经在线搜索过，但是当我插入代码时 javascript 代码不起作用。这里有人能帮我吗？谢谢！

这是 5 分钟计时器的 javascript 代码：

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + " " + " " + seconds;

    if (--timer < 0) {
        timer = duration;
    }
}, 1000);
}

window.onload = function () {
var fiveMinutes = 60 * 5,
    display = document.querySelector('#time');
startTimer(fiveMinutes, display);
};

Answer 1

对于这种情况，您应该使用网络 "Session storage" api。对你有很大帮助。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Answer 2

检查这种方法，其中时间存储在浏览器的本地存储中，因此刷新时不会重置：

：HTML 代码：

<div id="time">

</div>

：JS 代码：

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + " " + " " + seconds;

    if (--timer < 0) {
        timer = duration;
    }
  console.log(parseInt(seconds))
  window.localStorage.setItem("seconds",seconds)
  window.localStorage.setItem("minutes",minutes)
}, 1000);
}

window.onload = function () {
  sec  = parseInt(window.localStorage.getItem("seconds"))
  min = parseInt(window.localStorage.getItem("minutes"))

  if(parseInt(min*sec)){
    var fiveMinutes = (parseInt(min*60)+sec);
  }else{
    var fiveMinutes = 60 * 5;
  }
    // var fiveMinutes = 60 * 5;
  display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

这是代码笔中相同的工作模型https://codepen.io/anon/pen/GymRNV?editors=1011

P.S: 不能在这里使用它，因为它是一个沙箱，不能访问 localstorage。

Answer 3

使用w3学校倒数计时器，倒数日期使用localstorage.mytime=setDate(d.getDate + 7)，如果distance < 0;localStorageremoveItem，也是在最后，就是这样，运行代码

Answer 4

抱歉 var distance = localStorage.getItem("mytime") - now;var x =localStorage.getItem("mytime");我花了大约 6 周的时间来解决这个问题，它有效，你需要本地存储但只在倒计时时，现在仍然必须运行所以计数器计数，倒计时是锚点，看看 w3school 那里设置了倒计时，这就是它起作用的原因，这就是你使用本地存储

刷新网页时如何防止倒数计时器重置？

How to prevent countdown timer from resetting when webpage is refreshed?

javascript

timer

countdown