Keep the value of a countdown timer with javascript

Navigation
1

I have a regressive cot, but when the browser is updated it comes back to the beginning, what I need is for it to keep the count even updating the page.

I've 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, can someone give me a follow-up?

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>
    
asked by anonymous 11.06.2018 / 21:25

2 answers

3

You can use localStorage for this, but be aware that it works only in the browser session where the page was opened. You can close the browser or the flip that localStorage is preserved, but if it opens in another browser that has not opened the page before, the counter will start over.

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

I will not create an executable example here because localStorage will not work on the SOpt server. Here is 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;
    
11.06.2018 / 22:14
2

One solution can be to use localStorage to save the counter time to each update. It is simpler than cookies. Since you do not want the direct answer, I recommend you take a look at the localStorage .

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

    
11.06.2018 / 21:38
How to add elements of a list in a dictionary in Python3 html shellscript table