Question

我正在尝试在开始/停止计时器中检索localStorage数据。我的目标是让计时器在页面加载时自动启动，但是当用户离开并稍后返回（页面刷新）时，计时器将从停止的位置恢复。

我即将开始工作..但每次刷新页面后，它都会重新开始00:00:00。

我创建了一个setTimeout函数，延迟3秒，以说明某些正在运行。

非常感谢任何可以帮助我走上正轨的人。

HTML

<!-- Timer -->
<div class="time-wrapper">
  <strong>Time</strong>
  <span id="time-total">00:00:00</span>
</div>

<!-- Controls -->
<div class="button-wrapper">
    <button id="start-timer" class="button">Start</button>
    <button id="pause-timer" class="button">Pause</button>
</div>

JS （使用EasyTimer.js插件）

/* Create Timer
********************************/
var timer = new Timer();

var timeTotal = $('#time-total'),
    timeKey = 'time_stored',
    timeStored = localStorage.getItem(timeKey);

// Update Event
timer.addEventListener('secondsUpdated', function (e) {
    $(timeTotal).html(timer.getTimeValues().toString());
});

// Started Event
timer.addEventListener('started', function (e) {
    $(timeTotal).html(timer.getTimeValues().toString());
});

// Start Timer
$('#start-timer').click(function () { timer.start(); });
$('#pause-timer').click(function () { timer.pause(); });

/* When page loads
********************************/
$(document).ready(function() {

    setInterval(function() {
        localStorage.setItem(timeKey, timeTotal.text());
    }, 500);

    if (timeStored) {
        timeTotal.text(timeStored);
    }

    setTimeout(function() {
        $('#start-timer').click();
        timer.start();
    }, 3000);
});

Answer 1

您可以在启动计时器时设置默认值 - 请参阅下面的示例。您可能需要相应地调整“开始”按钮的功能，因为它还会调用计时器的start（）方法。请注意我为你的localStorage使用了不同的密钥（以防万一你已经在浏览器中设置了一个值）并且我只存储了秒，每当事件secondsUpdated被触发时它就会增加。您不需要自己的setInterval，因为您可以使用上述事件触发的计时器的间隔。

var timer = new Timer();

var timeTotal = $('#time-total'),
timeKey = 'time_stored_seconds',
timeStored = localStorage.getItem(timeKey);

// Update Event
timer.addEventListener('secondsUpdated', function (e) {
    var newValue = parseInt(localStorage.getItem(timeKey) | 0)+1
    localStorage.setItem(timeKey, newValue);
    $(timeTotal).html(timer.getTimeValues().toString());
});

// Started Event
timer.addEventListener('started', function (e) {
    $(timeTotal).html(timer.getTimeValues().toString());
});

// Start Timer
$('#start-timer').click(function () { timer.start(); });
$('#pause-timer').click(function () { timer.pause(); });

/* When page loads
********************************/
$(document).ready(function() {
    if (timeStored) {

        timeTotal.text(timeStored);
    }else{
        localStorage.setItem(timeKey, 0);
        timeStored = 0
    }

    timer.start({ precision: 'seconds', startValues: {seconds: parseInt(timeStored)}});

});

在“开始/停止”计时器

1 个答案: