Javascript Contagem regressiva permanece quando atualizo a pagina

naytan10 · 16 de abril de 2018

Galera estou tentando implementar no meu Site uma contagem regressiva, só que toda vez que atualizo a pagina o contador reinicia, ai não como fazer para ele simplesmente continuar contando

ta aí o codigo que estou usando

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Relogio</title>
<script type="text/javascript">
    

    
var segundo=new Number();
var segundo=61;

var minuto=new    Number();
var minuto=60;
    
var hora=new Number();    
var hora=24;    
    
function start(){
    if((segundo - 1) >= 0){
        segundo=segundo - 1;
        if (segundo == 0){
            segundo=60;
        if (segundo == 60){
            minuto= minuto-1;
        
        if (minuto == 0){
            minuto=60;
        if (minuto == 60){
            hora=hora-1;
        }    
        }
        }    
        } else if (segundo < 10){
            segundo ="0"+segundo;
        }
        
        segundos.innerText=segundo;
        minutos.innerText=minuto;
        horas.innerText=hora;
        setTimeout('start();',1000);
    }
    
}    
    
</script>    
    
<style>
    
    #ContagemRegressiva{
        width: 800px;
        height: 500px;
        background-color: orange;
        left: 150px;
        
    }
    
    
    #segundos{
        font: bold 78px Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        padding: 50px;
        color: #000000;
        text-align: center;
        border: thin dashed #f1f1f1;
        width: 50px;
        height: 50px;
        float: left;
        
    }
    
    #minutos{
        font: bold 78px Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        padding: 50px;
        color: #000000;
        text-align: center;
        top: 50px;
        border: thin dashed #f1f1f1;
        width: 50px;
        height: 50px;
        float: left;
    }

    #horas{
        font: bold 78px Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        padding: 50px;
        color: #000000;
        text-align:center;
        border: thin dashed #f1f1f1;
        width: 50px;
        height: 50px;
        float: left;
    }
    
    #texto{
        font: bold 32px Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        color: white;
        text-align: left;
        float: left;
    }
    
    #marcadores{
        width: 750px;
        height:50px;
        
    }
    
</style>    
    
    
</head>

<body onLoad="start();">
    
 <div id="ContagemRegressiva">
    <div id="marcadores"> 
    <div id="texto">Horas      Minutos     Segundos </div>
        
    </div>    
    <div id="horas"></div>
    <div id="minutos"></div>
    <div id="segundos"></div>
    
    </div>
    
    
    
    
</body>
</html>