Create a "real time" countdown timer with jQuery

Question

My countdown timer resets every time I refresh the page. I need this countdown to reset only when it reaches zero, no matter how many times the page refreshes.

I have no idea how to make the countdown timer work that way, could you help me?

I need something like this: https://intellywp.com/evergreen-countdown-timer

Here is my code:

function contador() {
	var hr = "23";
	var mm = "59";
	var ss = "59";

    var interval = setInterval(function(){

        if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
        ss--;
        if(ss == 0)
        {
            ss = 59;
            mm--;
            if(mm == 0)
            {
                mm = 59;
                hr--;
            }
        }

        if(hr.toString().length < 2) hr = "0"+hr;
        if(mm.toString().length < 2) mm = "0"+mm;
        if(ss.toString().length < 2) ss = "0"+ss;
        $("#contador").html("<span class='hora'>"+hr+"</span> : <span class='minuto'>"+mm+"</span> : <span class='segundo'>"+ss+'</span>');

    },1000)
}
window.onload = contador;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contador" class="py-4"></div>

Answer 1

On each interval, simply set something to local storage:

function contador() {

	var hr = localStorage.getItem('hr');
    var mm = localStorage.getItem('mm');
	var ss = localStorage.getItem('ss');
    if (!hr || !mm || !ss) {
        hr = "23";
        mm = "59";
        ss = "59";
        localStorage.setItem('hr', hr);
        localStorage.setItem('mm', mm);
        localStorage.setItem('ss', ss);
    }

    var interval = setInterval(function(){

        if(hr == 0 && mm == 0 && ss == 0)clearInterval(interval);
        ss--;
        if(ss == 0)
        {
            ss = 59;
            mm--;
            if(mm == 0)
            {
                mm = 59;
                hr--;
            }
        }

        if(hr.toString().length < 2) hr = "0"+hr;
        if(mm.toString().length < 2) mm = "0"+mm;
        if(ss.toString().length < 2) ss = "0"+ss;
        $("#contador").html("<span class='hora'>"+hr+"</span> : <span class='minuto'>"+mm+"</span> : <span class='segundo'>"+ss+'</span>');

          localStorage.setItem('hr', hr);
          localStorage.setItem('mm', mm);
          localStorage.setItem('ss', ss);

    },1000)
}
window.onload = contador;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contador" class="py-4"></div>

Note: If any of the variables are missing from local storage, the timer is reset to 23:59:59.