会话上的计时器存储刷新时停止

Question

我正在做一个存储在会话存储中的计时器，但如果刷新页面，计时器就会停止！ 请帮忙

function time (secondes) {
const temps = Date.now();
const apres = temps + secondes * 1000;
const timer = setInterval(() => {
const secondsLeft = Math.round((apres - Date.now()) / 1000)
if (secondsLeft < 0) {
clearInterval(timer);
sessionStorage.clear();
if (sessionStorage.getItem('Timer') === null) {
$(".reservation").css("display", "none");
}
return;
}
sessionStorage.setItem("Timer", secondsLeft)
}, 1000);
}

这里的getItem("计时器"(只是为了检查计时器是否结束，我在另一种方法中使用此计时器项目

感谢

Answer 1

即使页面重新加载，会话存储也会保留。阅读此内容：https：//developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

您应该做的是，在刷新页面后，再次从 SessionStorage 获取 Timer 的值，然后再次调用该方法。

function time (secondes) {
const temps = Date.now();
const apres = temps + secondes * 1000;
const timer = setInterval(() => {
const secondsLeft = Math.round((apres - Date.now()) / 1000)
if (secondsLeft <= 0) {
clearInterval(timer);
sessionStorage.clear();
//you dont need below if condition as secondsLeft is already 0. Commented if condition.
//if (sessionStorage.getItem('Timer') === null) {
$(".reservation").css("display", "none");
//}
return;
}
else{
//update the div content and show the current timer value in the div or in the span inside the div. (write a separate function for this).
}
sessionStorage.setItem("Timer", secondsLeft)
}, 1000);
}
//Method to call after page load:
function startTimerOnPageLoad(){
var x = parseInt( sessionStorage.getItem('Timer'));
//put a check, Timer is present in sessionStorage and x is not undefined. I've not added it here purposely.
time(x);
}