How to continue my countdown timer on browse refresh?

Question

I am new to Javascript and created a Countdown Timer with some Asp.net controls

The Probelm is that countdown timer starts with given time in hidden fields up to 00:00:00 and it's working fine now, but when I refresh the browser timer reset and starts again with default values given in hidden fields.

I searched about my problem and got the sollution with localStorage but unable to applied due to lack of knowledge in javascript. and I want to format my timer too like 01:03:40 istead of 1:3:40

Here is my Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var Second = 60;
        var Hour, Minute, Time;
        var PreviousSelectedPage = '';

        function CountDown() {            
            var CurrentTime = Hour + ':' + Minute + ':' + Second;           
            if (CurrentTime == '00:00:00') {
                clearInterval(Time);               
            }
            document.getElementById('lblDuration').innerHTML = CurrentTime;
            Second--;
            if (Second == -1) {
                Second = 59;
                Minute--;
            }
            if (Minute == -1) {
                Minute = 59;
                Hour--;
            }
        }



        $(document).ready(function () {
            Hour = document.getElementById('<%=Hour.ClientID%>').value;
            Minute = document.getElementById('<%=Minute.ClientID%>').value;            
            Time = setInterval(function () { CountDown(); }, 1000);
        });
    </script>

and HTML

<div>
    <asp:HiddenField ID="Hour" runat="server" Value="3" />
    <asp:HiddenField ID="Minute" runat="server" Value="25" />
        <label id="lblDuration"></label>
    </div>

Please can anyone help me ?

Answer 1

Hopefully this'll help with both your issues.

For saving values on refresh , if you're okay with learning about localStorage I'd check out W3 School's article on the subject.

The easiest way to implement this would be to use

localStorage.setItem("time", CurrentTime);   // Note that CurrentTime must be a string!

in each iteration of your code after setting the CurrentTime var.

When you start up your application, a simple if statement

if (localStorage.getItem("time") {
    CurrentTime = localStorage.getItem("time");
} else {
    // do what you are already doing to set default values
}

will work, as localStorage.getItem will return null if the value doesn't exist (or if you set the value to null manually).

(for localStorage, you can also use [bracket notation] and will probably see that in most common examples)

localStorage["foo"] = "value"; 
// is the same as: 
localStorage.setItem("foo", "value")
// and
var bar = localStorage["foo"]; 
// is the same as: 
var bar = localStorage.getItem("foo");

For your formatting issue , when converted to Number objects your values will lose leading zeroes, however when you output them as strings you can just use your own padding function.

This response has a simple solution to this problem, which I think is a pretty elegant way to go about this.

If you extend Number like so...

Number.prototype.pad = function(size) {
  var s = String(this);
  while (s.length < (size || 2)) {s = "0" + s;}
  return s;
}

Then you're able to do

var second = 3     // or any Number object
var minute = 9;
var hour = 4;
var time = hour.pad() + ':' + minute.pad() + ':' + second.pad();
// time will be: 04:09:03

If you have issues with your objects being strings and not numbers, use

var str = "003";
var num = Number.parseInt(str); 
// or
num = Number.parseFloat(str);

If you have any questions, comments, or concerns please ask away!

Answer 2

Not really a complete answer but here are a few suggestions:

1. Store the time using local storage each time the time changes so you can pick it up and resume where you left off when the page reloads.

2. If you are using PHP or ASP.NET you could have the countdown done on the server and simply hook into it, however that could be much more difficult and unnecessary.