Keep the value of a countdown counter with javascript

Question

I have a regressive quoter, but when the browser is updated it returns from the beginning, what I need is for it to keep counting even updating the page.

I have been researching this solution with cookies but I did not find the solution, I do not want the answer given, I want to learn how it does, someone can give me a north to follow?

Note: If someone does not understand the problem, it is the same as this one.

function tempo(op) {
  if (op == 1) {
    document.getElementById('parar').style.display = "block";
    document.getElementById('comeca').style.display = "none";
  }
  var s = 59;
  var m = 1;
  var h = 1;
  intervalo = window.setInterval(function() {
    if (s == 0) { m--; s = 59; }
    	if (m == 0) { h--; m = 0; }
   		 if (h < 0) h = 0;
   			 if (h < 10) document.getElementById("hora").innerHTML = "0" + h; else document.getElementById("hora").innerHTML = h;
      			if (s < 10) document.getElementById("segundo").innerHTML = "0" + s; else document.getElementById("segundo").innerHTML = s;
  					  if (m < 10) document.getElementById("minuto").innerHTML = "0" + m; else document.getElementById("minuto").innerHTML = m;    
    s--;
    if ((h == 0) && (m == 0) && (s == 0) ) m=59;
  },1000);
  
}
window.onload=tempo;

body{ background: #20262E;} 

/* CSS Contador */
.ContBoxContador{ width: 270px; margin: 0 auto; color: white; text-align: center; }
.ContBoxContador:after{ content: ""; display: table; clear: both; }
.ContBox001{ width: 80px; float: right; background-color: red; border-radius: 5px; }
.ContSubbox001{ width: 80px; }
.ContSubbox001 span{ font-size: 14pt; padding: 0; margin: 0;}
.ContSubText001{ font-size: 8pt; color: white; margin: 0; padding-bottom: 4px; font-weight: 500; font-family: open sans, sans-serif; }
.ContEntreBox{ width: 10px; float: right; margin: 0; padding: 0;}
.ContEntreBox h1{ font-size: 2em; color: white; font-weight: 100; margin: 0; padding: 0;}

<div class="timerBox">
  <div class="ContBoxContador">
    <div class="ContBox001">
      <div class="ContSubbox001">
        <span id="segundo">00</span>
      </div>

      <div class="ContSubbox001">
        <h6 class="ContSubText001">Segundos</h6>
      </div>
    </div>

    <div class="ContEntreBox"><h1>:</h1></div>

    <div class="ContBox001">
      <div class="ContSubbox001">
    <span id="minuto">00</span>
    </div>
    
    <div class="ContSubbox001">
      <h6 class="ContSubText001">Minutos</h6>
    </div>
  </div>
  
  <div class="ContEntreBox"><h1>:</h1></div>

   <div class="ContBox001">
    <div class="ContSubbox001">
      <span id="hora">00</span>
    </div>
    
    <div class="ContSubbox001">
      <h6 class="ContSubText001">Horas</h6>
    </div>
    </div>
  </div>
</div>

Answer 1

You can use the localStorage for this, but know that it works only in the browser session where the page was opened. You can close the browser or the tab that the localStorage is preserved, but if you open in another browser that has not opened the page before, the counter will restart.

In the example below I created a JSON object in localStorage to store variables h, m and s, which will be recovered with JSON.parse.

I will not create an executable example here because the localStorage will not work on the Sopt server. Follow the code with explanations in the comments:

function tempo(op) {
  if (op == 1) {
    document.getElementById('parar').style.display = "block";
    document.getElementById('comeca').style.display = "none";
  }

  var ls = localStorage.getItem("tempo"); // chama o LS

  if(ls){ // verifica se o LS existe
     ls = JSON.parse(ls); // converte para JSON
     var s = ls.s; // pega os segundos
     var m = ls.m; // pega os minutos
     var h = ls.h; // pega as horas
  }else{
     var s = 59;
     var m = 1;
     var h = 1;
  }

  intervalo = window.setInterval(function() {

    localStorage.setItem("tempo", '{"h": '+h+', "m": '+m+', "s": '+s+'}'); // atualiza o LS

    if (s == 0) { m--; s = 59; }
        if (m == 0) { h--; m = 0; }
         if (h < 0) h = 0;
             if (h < 10) document.getElementById("hora").innerHTML = "0" + h; else document.getElementById("hora").innerHTML = h;
                if (s < 10) document.getElementById("segundo").innerHTML = "0" + s; else document.getElementById("segundo").innerHTML = s;
                      if (m < 10) document.getElementById("minuto").innerHTML = "0" + m; else document.getElementById("minuto").innerHTML = m;    
    s--;
    if ((h == 0) && (m == 0) && (s == 0) ) m=59;
  },1000);

}
window.onload=tempo;

Answer 2

A solution may be to use the localStorage to save the time of the counter each update. It is simpler than cookies. As you don’t want the direct answer, I recommend you take a look at the documentation of localStorage.

Remember that on first access, the user will not have the counter information saved on localStorage.