Javascript秒表.需要帮助存储我的计时器，当页面刷新保持时间，并从那里继续

Question

我有一个可以工作的秒表。当我点击开始按钮时，秒表开始，当我点击暂停按钮时，秒表暂停。我想要的是当我刷新浏览器以保持秒表的当前时间并从那里继续使用相同的功能时。或者当我从数据库回显秒表时间以继续从它之前的确切时间保存它时。

let showTime = document.querySelector("#output");
let startTimeButton = document.querySelector("#start")
let pauseTimeButton = document.querySelector("#pause")
pauseTimeButton.style.display = "none";
let seconds = 0;
let interval = null;
const timer = () => {
seconds++;
// Get hours
let hours = Math.floor(seconds / 3600);
// Get minutes
let minutes = Math.floor((seconds - hours * 3600) / 60);
// Get seconds
let secs = Math.floor(seconds % 60);
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
if (secs < 10) {
secs = `0${secs}`;
}
showTime.innerHTML = `${hours}:${minutes}:${secs}`;
};
startTimeButton.addEventListener("click", () => {
pauseTimeButton.style.display = "block";
startTimeButton.style.display = "none";
console.log("START TIME CLICKED");
if (interval) {
return;
}
interval = setInterval(timer, 1000);
});
// Pause function
pauseTimeButton.addEventListener("click", () => {
pauseTimeButton.style.display = "none";
startTimeButton.style.display = "block";
console.log("PAUSE TIME CLICKED");
clearInterval(interval);
interval = null;
});

<button id="start">Start</button>
<button id="pause">Pause</button>
<div id="output"></div>

Answer 1

可以使用localStorage

为了节省每一秒钟，你可以修改你的timer函数保存到localStorage:

let seconds = 0;
if (localStorage.getItem("stopwatchSeconds") != null) {
seconds = parseInt(localStorage.getItem("stopwatchSeconds"));
}

//...
const timer = () => {
//...
seconds++;
localStorage.setItem("stopwatchSeconds", seconds);
//...
};
//...

我希望这对你有帮助。

Answer 2

看来你要找的是localStorage。您存储您的秒表数据，如startAt,totalSeconds在存储中，当您刷新页面时，您可以根据保存的数据恢复您的秒表状态:remainingTime = (startAt + totalSeconds) - currentTime

localStorage docs: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage#storing_simple_data_%E2%80%94_web_storage