javascript - localStorage如何保存倒计时值，以便在重新加载页面时不会重置

Question

当我重新加载页面时，我的 1 分钟倒计时也会重新加载。 我尝试使用 localStorage 但在我看来失败了。 请看一下，我不知道该修复哪里。

谢谢

我的脚本

        /* for countdown */
    var countDown = (function ($) {
        // Length ms
        var timeOut = 10000;
        // Interval ms
        var timeGap = 1000;

        var currentTime = (new Date()).getTime();
        var endTime = (new Date()).getTime() + timeOut;

        var guiTimer = $("#clock");
        var running = true;
        var timeOutAlert = $("#timeout-alert");
        timeOutAlert.hide();

        var updateTimer = function() {
            // Run till timeout
            if(currentTime + timeGap < endTime) {
                setTimeout( updateTimer, timeGap );
            }
            // Countdown if running
            if(running) {
                currentTime += timeGap;
                if(currentTime >= endTime) { // if its over
                    guiTimer.css("color","red");
                }
            }
            // Update Gui
            var time = new Date();
            time.setTime(endTime - currentTime);
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();

            guiTimer.html((minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds);

            if (parseInt(guiTimer.html().substr(3)) <= 10){ // alert the user that he is running out of time
                guiTimer.css('color','red');
                timeOutAlert.show();
            }

        };

        var pause = function() {
            running = false;
        };

        var resume = function() {
            running = true;
        };

        var start = function(timeout) {
            timeOut = timeout;
            currentTime = (new Date()).getTime();
            endTime = (new Date()).getTime() + timeOut;
            updateTimer();
        };

        return {
            pause: pause,
            resume: resume,
            start: start
        };
    })(jQuery);

    jQuery('#break').on('click',countDown.pause);
    jQuery('#continue').on('click',countDown.resume);

    var seconds = 60; // seconds we want to count down
    countDown.start(seconds*1000);

我尝试修复它，但我不知道在哪里/如何放置 localStorage。

Answer 1

这可能对你有帮助。

HTML 代码:

<div id="divCounter"></div>

JS代码

var test = 60;
if (localStorage.getItem("counter")) {
    if (localStorage.getItem("counter") <= 0) {
        var value = test;
        alert(value);
    } else {
        var value = localStorage.getItem("counter");
    }
} else {
    var value = test;
}
document.getElementById('divCounter').innerHTML = value;

var counter = function() {
    if (value <= 0) {
        localStorage.setItem("counter", test);
        value = test;
    } else {
        value = parseInt(value) - 1;
        localStorage.setItem("counter", value);
    }
    document.getElementById('divCounter').innerHTML = value;
};

var interval = setInterval(function() { counter(); }, 1000);