javascript - 如何在浏览器刷新时保存计数计时器？

Question

我是堆栈溢出和 JavaScript 的新手。我的第一个任务是创建一个倒数计时器。我的代码可以工作，但是如果刷新浏览器，我就会失去计时器位置。我一直在阅读有关使用本地存储来保存位置的内容，但我不确定如何将其添加到我当前的代码中。有人愿意帮忙吗？这就是我当前的 javascript 在 html 文件中的样子。

     window.onload = () => {
        let day = 0;
        let hour = 0;
        let minute = 0;
        let seconds = 0;
        let totalSeconds = 0;

        let intervalId = null; 

        function startTimer() {
            ++totalSeconds;
            day = Math.floor(totalSeconds/86400);
            hour = Math.floor(totalSeconds /3600);
            minute = Math.floor((totalSeconds - hour*3600)/60);
            seconds = totalSeconds - (hour*3600 + minute*60);

            document.getElementById("day").innerHTML = day;
            document.getElementById("hour").innerHTML = hour;
            document.getElementById("minute").innerHTML = minute;
            document.getElementById("seconds").innerHTML = seconds;
        } 

        document.getElementById('start-btn').addEventListener('click', () => {
            intervalId = setInterval(startTimer, 1000);
        })

        document.getElementById('stop-btn').addEventListener('click', () => {
            if (intervalId)
                clearInterval(intervalId);
        });


        document.getElementById('reset-btn').addEventListener('click', () => {
            totalSeconds = 0;
            document.getElementById("day").innerHTML = '0';
            document.getElementById("hour").innerHTML = '0';
            document.getElementById("minute").innerHTML = '0';
            document.getElementById("seconds").innerHTML = '0';
        }); 
    }

Answer 1

首先，您应该存储计时器启动的时间，然后计算经过的秒数，而不是存储经过的秒数。

这里，如果本地存储中存在“start-timestamp”的值，则将startTimestamp设置为该值并激活计时器。

当定时器启动时，startTimestamp被设置为当前时间并存储在本地存储中，当定时器停止时，“start-timestamp”被删除本地存储。

let day = 0;
let hour = 0;
let minute = 0;
let seconds = 0;
let startTimestamp = 0;

let intervalId = null; 

function updateTimer() {
    let totalSeconds = (Date.now() - startTimestamp) / 1000;
    day = Math.floor(totalSeconds/86400);
    hour = Math.floor(totalSeconds /3600);
    minute = Math.floor((totalSeconds - hour*3600)/60);
    seconds = totalSeconds - (hour*3600 + minute*60);

    document.getElementById("day").innerHTML = day;
    document.getElementById("hour").innerHTML = hour;
    document.getElementById("minute").innerHTML = minute;
    document.getElementById("seconds").innerHTML = seconds;
}

{
    const _startTimestamp = localStorage.getItem("start-timestamp");
    if (_startTimestamp) {
        startTimestamp = Number(_startTimestamp);
        intervalId = setInterval(updateTimer, 1000);
    }
}

document.getElementById('start-btn').addEventListener('click', () => {
  if (!intervalId) {
      startTimestamp = Date.now();
      localStorage.setItem("start-timestamp", startTimestamp);
      intervalId = setInterval(updateTimer, 1000);
  }
})

document.getElementById('stop-btn').addEventListener('click', () => {
    if (intervalId) {
        clearInterval(intervalId);
        localStorage.removeItem("start-timestamp");
    }
});


document.getElementById('reset-btn').addEventListener('click', () => {
    totalSeconds = 0;
    document.getElementById("day").innerHTML = '0';
    document.getElementById("hour").innerHTML = '0';
    document.getElementById("minute").innerHTML = '0';
    document.getElementById("seconds").innerHTML = '0';
});