SessionStorage和重新加载页面的javascript

Question

我正在尝试在sessionStorage密钥中保留信息（计时器）。 如果用户重新加载页面，我想保持计时器运行。

我尝试过这样的事情

    var timer = 50;
    sessionStorage.setItem('timer_station', timer);
    var timer_data = sessionStorage.getItem('timer_station');
    var interval = setInterval(function () {
        timer_data--;
        console.log(timer_data);
        $('#count-timer').text(timer_data);
        if (timer_data === 0) {
            $('#count-timer').text('Désolé, votre réservation a expirée');
            clearInterval(interval);
            sessionStorage.clear();
        }
    }, 1000);
},

但是，当我重新加载页面时，计时器重置。 非常感谢 ：）

Answer 1

首先，我们需要处理他们之前没有来过的情况：

var timer = sessionStorage.getItem('timer_station');
if (!timer){
    timer = 50
}

然后进行间隔，保存剩余的新时间：

var interval = setInterval(function () {
    timer--;
    console.log(timer);
    sessionStorage.setItem('timer_station', timer);
    $('#count-timer').text(timer);
    if (timer === 0) {
        $('#count-timer').text('Désolé, votre réservation a expirée');
        clearInterval(interval);
        sessionStorage.clear();
    }
}, 1000);

Answer 2

这是因为您要在每次重新加载时设置timer_station值。 您想将setItem移入if检查。 就像是...

var interval = setInterval(function () {
if (isThereATimerStationAlreadySetCheck) {
  //do stuff with it
} else {
  //set it
}

}, 1000);