1

Tenho um cotador regressivo, porém quando o navegador é atualizado ele volta a contar do inicio, o que eu preciso é que ele mantenha a contagem mesmo atualizando a página.

Andei pesquisando essa solução com cookies porém não achei a solução, não quero a resposta dada, quero aprender como faz, alguém pode me dar um norte a seguir?

Obs: Caso alguém não entenda o problema, é o mesmo que esse aqui.

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>

1
  • 2
    Amigo usa a sessionStorage ele vai guardar o seu valor até que a janela seja fechada. 11/06/2018 às 19:27

2 Respostas 2

3

Pode usar o localStorage para isso, mas saiba que ele funciona apenas na sessão do navegador onde a página foi aberta. Você pode fechar o navegador ou a aba que o localStorage é preservado, mas se abrir em outro navegador que não tenha aberto a página antes, o contador irá recomeçar.

No exemplo abaixo eu criei um objeto JSON no localStorage para guardar as variáveis h, m e s, que serão recuperadas com JSON.parse.

Não vou criar um exemplo executável aqui porque o localStorage não irá funcionar no servidor do SOpt. Segue o código com explicações nos comentários:

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;
1
  • Era exatamente isso que eu precisava, muito obrigado a você e a todos que comentaram sobre Storage, pois eu não conhecia, estou estudando sobre.
    – Fabio
    11/06/2018 às 20:19
2

Uma solução pode ser utilizar o localStorage para salvar o tempo do contador a cada atualização. É mais simples do que os cookies. Como você não quer a resposta direto, te recomendo dar uma olhada na documentação do localStorage.

Lembre-se que no primeiro acesso, o usuário não terá a informação do contador salvo no localStorage.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .