Working script using 24 seconds instead of 24 hours – it will reset after timer is finished so next time the page is refreshed it starts from 0

Uncomment the lines to have a working script.

NOTE change

var savedDate = "", // +localStorage.getItem("date"),

to

var savedDate = +localStorage.getItem("date"),

const pad = (num) => ("0" + num).slice(-2);

$(function() {
  var savedDate = "", // +localStorage.getItem("date"),
    date = new Date();
  if (savedDate && !isNaN(savedDate)) date = new Date(savedDate);
  else date.setHours(0, 0, 0, 0);


  var hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds(),
    $span = $('#countup');

  var timer = setInterval(function() {
    date.setSeconds(date.getSeconds() + 1);
    if (date.getHours() >= 24) {
      clearInterval(timer);
      $span.text("timer finished");
      // localStorage.removeItem("date");
    } else {
      $span.text(
        pad(date.getHours()) + ":" +
        pad(date.getMinutes()) + ":" +
        pad(date.getSeconds())
      );
      // localStorage.setItem("date", date.getTime())
    }
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup"></span>

I think u should use localstorage for store time. its better to store time on unload page event

The best way to persist a countdown is probably to save the end of the countdown as a fixed point in time (such as a UNIX timestamp, which JavaScript has support for) and then re-calculate the difference between local time and the saved time when the page loads. There are actually such handly libraries that help out with time operations, such as Moment.js.

I would recommend using LocalStorage over cookies, cookies are also sent to the server, and are designed more for authentication/session tokens. Here’s a good article to get started:

https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

You can use for example localstorage to save timer there and then just to use it.
Please try below example:

// Set an item to localstorage
localStorage.setItem('name', 'value');

// Read the item from localstorage
localStorage.getItem('name'); => // => 'value'

In your code it should look like:

(function(){
  $(document).ready(function() {

    var time = localStorage.getItem('timer') || "00:00:00",
        parts = time.split(':'),
        hours = +parts[0],
        minutes = +parts[1],
        seconds = +parts[2],
        span = $('#countup');

    function correctNum(num) {
        return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds++;
        if(seconds > 59) {
            minutes++;
            seconds = 0;

            if(minutes > 59) {
                hours++;
                seconds = 0;
                minutes = 0;

                if(hours >= 24) {
                  alert("timer finished");
                }
            }
        }

        var displayTime = correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds);
        localStorage.setItem('timer', displayTime);
        span.text(displayTime);
    }, 1000); 
  }); 
})()

I am using a countdown timer I’ve found in google, I just modify some line of codes to make the timer to count up instead of counting down. I just want my timer to count up then it stops when I click the stop button. My problem is I want the timer to not reset even if the page is refresh or the browser is restart. From what I know I need to use cookies for this but I don’t know how to incorporate it to my code. Please help..

Here’s my code.

(function() {
  $(document).ready(function() {
    var time = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countup');

    function correctNum(num) {
      return (num < 10) ? ("0" + num) : num;
    }

    var timer = setInterval(function() {
      seconds++;
      if (seconds > 59) {
        minutes++;
        seconds = 0;

        if (minutes > 59) {
          hours++;
          seconds = 0;
          minutes = 0;

          if (hours >= 24) {
            alert("timer finished");
          }
        }
      }
      span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);
  });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="countup">00:00:00</span>