I have used a count down timer, but it resets itself

Question

Whenever i refresh the page the timer resets. It starts from from the begining. I have use the plugin called countdown.js

Here is the code :

<script type="text/javascript">
  var now = new Date();
    var countTo = 30 * 24 * 60 * 60 * 1000 + now.valueOf();
    $('.timer').countdown(countTo, function(event) {
        var $this = $(this);
        switch(event.type) {
            case "seconds":
            case "minutes":
            case "hours":
            case "days":
            case "weeks":
            case "daysLeft":
                $this.find('span.'+event.type).html(event.value);
                break;
            case "finished":
                $this.hide();
                break;
        }
    });
</script>


<div class="col-md-8 col-md-offset-3 timer">
    <div class="days-wrapper" style="text-align:center;">
        <span class="days"></span> 
        <p style="margin-left:-80px;"><br><br>DAYS</p>
    </div>
    <div class="hours-wrapper" style="text-align:center;">
        <span class="hours"></span> 
        <p style="margin-left:-80px;"><br><br>HOURS</p>
    </div>
    <div class="minutes-wrapper" style="text-align:center;">
        <span class="minutes"></span> 
        <p style="margin-left:-80px;"><br><br>MIN</p>
    </div>
</div>

Answer 1

Everytime you reload a page javascripts "forgots" whatever you have done previously and your code is executed entirely from the beginning.

A possible solution is to use some persistent storage method such as localStorage

In your example, you can do something like:

var previousCountTo = localStorage.getItem('time'); 
var now = new Date(); 
var countTo = previousCountTo?parseInt(previousCountTo, 10):(30 * 24 * 60 * 60 * 1000 + now.valueOf());
localStorage.setItem('time', countTo); // Save the current time.
$('.timer').countdown(countTo, function(event) {
      var $this = $(this);
    console.log(event);
      switch(event.type) {
          case "seconds":
          case "minutes":
          case "hours":
          case "days":
          case "weeks":
          case "daysLeft":
              $this.find('span.'+event.type).html(event.value);
              break;
          case "finished":
              $this.hide();
              localStorage.removeItem('time'); // once finished, remove the timer.
              break;
      }
});

Answer 2

When JavaScript is executed inside a browser, its execution scope is limited to the lifetime of the loaded page.

After the page is unloaded, all the state is discarded, which includes variables and timers. So the answer is you cannot do that .

PS: You cannot preserve variable state after the page is unloaded. This does not mean you can get no state over the edge. See @tehsis's excellent answer .