Countdown and local storage

Question

I don't know very well JavaScript but i must use it in my project.

I need countdown timers which after refresh page don't stop, not cleared and shown all time.

After press button you are redirect to other page, countown start ant button have 'disable value. After countdown time, button automatically must have enable value.

Here is my project: http://licznikii.cba.pl/dopostu/

In my first version everything works well but not after refresh page. Countdowns are cleared.

In my second version I used LocalStorage and it works well to but not much that I won't. After refresh page countowns are hidden. After countdown time button not have automatically enable value but after refreshpage. After refresh page after countdown time everything are showed good.

Please Help

Answer 1

After modifying your second-version it works. I've tested it in all browsers. Sorry for not code-refactoring, but I think you cope with this now :)

<!-- --------------------------------------------------------    SECOND VERSION -->
<script>
$(document).ready(function(){

    $('#defaultCountdown3').countdown({until: 0, onTick: highlightLast5});

    var teraz = Date.now();
    var zapisanyCzas = localStorage.getItem("defaultCountdown3");

    if (zapisanyCzas !== null && teraz < +zapisanyCzas) {

        var restTime = secDiff(teraz, +zapisanyCzas);
        console.log(restTime);

        $("#YourButton3").prop('disabled',true);
        $('#defaultCountdown3').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});

    } else {
        localStorage.removeItem("defaultCountdown3");
    }

    function highlightLast5(periods) {
    if ($.countdown.periodsToSeconds(periods) === 5) {
        $(this).addClass('highlight');
      }
    }

    $('#YourButton3').click(function() {
        localStorage.setItem("defaultCountdown3", Date.now() + 60 * 1000);
        $('#defaultCountdown3').removeClass('highlight').countdown('option', {until: 60, onExpiry: countdownFinished});
        $("#YourButton3").prop('disabled',true)
    });

    function countdownFinished(){
        // Finished - disable your button
         localStorage.removeItem("defaultCountdown3");
        $("#YourButton3").prop('disabled',false)
    }

    function secDiff(start, end){
      var diff = Math.abs(start-end);
      return (diff/1000);
    }

 });
</script>


<script>
$(document).ready(function(){

    $('#defaultCountdown4').countdown({until: 0, onTick: highlightLast5});

    var teraz = Date.now();
    var zapisanyCzas = localStorage.getItem("defaultCountdown4");

    if (zapisanyCzas !== null && teraz < +zapisanyCzas) {

        var restTime = secDiff(teraz, +zapisanyCzas);
        console.log(restTime);

        $("#YourButton4").prop('disabled',true);
        $('#defaultCountdown4').removeClass('highlight').countdown('option', {until: Math.round(restTime), onExpiry: countdownFinished});


    } else {
        localStorage.removeItem("defaultCountdown4");
    }

    function highlightLast5(periods) {
    if ($.countdown.periodsToSeconds(periods) === 5) {
        $(this).addClass('highlight');
      }
    }

    $('#YourButton4').click(function() {
        localStorage.setItem("defaultCountdown4", Date.now() + 120 * 1000);
        $('#defaultCountdown4').removeClass('highlight').countdown('option', {until: 120, onExpiry: countdownFinished});
        $("#YourButton4").prop('disabled',true)
    });

    function countdownFinished(){
        // Finished - disable your button
         localStorage.removeItem("defaultCountdown4");
        $("#YourButton4").prop('disabled',false)
    }

    function secDiff(start, end){
      var diff = Math.abs(start-end);
      return (diff/1000);
    }

 });
</script>