如何将我的倒数计时器存储在 cookie 中，以便即使在离开或重新加载页面时它也会继续倒计时？

Question

我的网页应该显示一个倒数计时器，现在设置为 1 小时。我想将倒计时存储在 cookie 中，这样即使我离开页面，计时器也会继续倒计时。我是在 javascript 中使用 cookie 的初学者，所以我真的需要一些帮助来解决我在这里做错的事情。

这是我的html代码

<b id="timer">00:00:00</b><br>
<button id="start">Start</button>
<button id="stop" hidden>Stop</button>

Javascript

var counter=0;
var timeleft=3600;

//function that returns countdown format 00:00:00
function convertSeconds(s){
    var hr=Math.floor(s/3600);
    var min=Math.floor(s/60%60);
    var sec=s%60;
    return ("0" + hr).slice(-2) + ':' + ("0" + min).slice(-2) + ':' + ("0" + sec).slice(-2);
}

//cookie expire time variable set to 1hr
var now = new Date();
var time = now.getTime();
time += 3600 * 1000;
now.setTime(time);

var cd = document.getElementById("timer");

if(document.cookie.length != 0){
    var carray = document.cookie.split("=");
    cd.innerHTML=carray[1]; //should display initial countdown duration before btnstart is clicked
    function timeIt(){ //function that displays the dynamic countdown timer
        counter++;
        cd.innerHTML=carray[1];
    }
}

var btnstart = document.getElementById("start");
var btnstop = document.getElementById("stop");

//starts countdown when btnstart clicked
btnstart.onclick = function()
{
    //storing the countdown format to a cookie and setting expire time to 1hour
    document.cookie = "cdanim=" + convertSeconds(timeleft-counter); + ";expires=" + now.toUTCString();
    setInterval(timeIt, 1000); //starts the countdown
    btnstart.hidden=true;
    btnstop.hidden=false;
}

现在它显示一些我不知道它来自哪里的随机文本，而不是显示倒计时本身。 carray[1] 应该返回 1:00:00 但它不是。请帮忙。

Answer 1

我做了一个使用 localStorage 的示例，而不是 cookie，但我认为 它仍然明白这一点。 StackOverflow 不允许 sn-ps 使用 localStorage，所以我在这里部署它：

示例网站

https://lab-btmhicjaje.now.sh

源代码

https://lab-btmhicjaje.now.sh/_src

HTML

<span class="mdl-chip">
    <span class="mdl-chip__text" id="timer"></span>
</span><br>
<button class="mdl-button mdl-js-button mdl-button--colored" onclick="startTimer()">Start</button>
<button class="mdl-button mdl-js-button mdl-button--colored" onclick="stopTimer()">Lap</button>
<button class="mdl-button mdl-js-button mdl-button--colored" onclick="resetTimer()">Reset</button>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
if (localStorage.getItem('timerRunning') === 'true')
    startTimer();
else
    displayTime(parseInt(localStorage.getItem('timestamp')));
});
let timer;
let startTimestamp = parseInt(localStorage.getItem('timestamp'));
function displayTime(timestamp) {
    if (timestamp)
        display(Date.now() - timestamp);
    else
        display(0);
}
function startTimer() {
    let timestamp = parseInt(localStorage.getItem('timestamp')) || Date.now();
    localStorage.setItem('timestamp', timestamp.toString());
    localStorage.setItem('timerRunning', 'true');
    clearInterval(timer);
    timer = setInterval(() => displayTime(timestamp), 100);
}
function stopTimer() {
    localStorage.setItem('timerRunning', 'false');
    clearInterval(timer);
}
function resetTimer() {
    localStorage.removeItem('timestamp');
    display(0);
}
function display(milliseconds) {
    let el = document.getElementById('timer');
    if (el)
        el.innerHTML = msToTime(milliseconds);
}
//https://coderwall.com/p/wkdefg/converting-milliseconds-to-hh-mm-ss-mmm
function msToTime(duration) {
    var milliseconds = parseInt((duration % 1000) / 100), seconds = parseInt((duration / 1000) % 60), minutes = parseInt((duration / (1000 * 60)) % 60), hours = parseInt((duration / (1000 * 60 * 60)) % 24);
    hours = (hours < 10) ? "0" + hours : hours;
    minutes = (minutes < 10) ? "0" + minutes : minutes;
    seconds = (seconds < 10) ? "0" + seconds : seconds;
    return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
}