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

Question

When I reload the page, my 1 minute countdown also reloads. I tried to use localStorage but it seems to me failed. Please have a look, I do not know where I should fix.

Thank you

My script

        /* 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);

I tried to fix it but I dont know where/how to put localStorage.

Answer 1

This may help you.

HTML Code:

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

JS Code

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);