CODEWITHSUNDEEP
javascriptheaderxhtml
Ali Bouslama
Ali Bouslama

Reputation: 33

How to save a static variable with Javascript even when refreshing page

In the following code, I would like to save chrono time even when i reload the page. The variable to save as static is "diff". Because i need my chrono to return me the las time saved when i redirect to the same page. this code is declared in the header section. This code is not doing so, how would I accomplish that? `

<script language="JavaScript">enter code here

var startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
    end = new Date()
    diff = end - start
    diff = new Date(diff)
    var msec = diff.getMilliseconds()
    var sec = diff.getSeconds()
    var min = diff.getMinutes()
    var hr = diff.getHours()-1
    if (min &lt; 10){
        min = "0" + min
    }
    if (sec &lt; 10){
        sec = "0" + sec
    }
    if(msec &lt; 10){
        msec = "00" +msec
    }
    else if(msec &lt; 100){
        msec = "0" +msec
    }
    //alert(document.getElementById("chronotime").innerText);
/*  document.getElementById("pps").innerHTML = hr + ":" + min + ":" + sec + ":" + msec

    document.getElementById("ppa").innerHTML = hr + ":" + min + ":" + sec + ":" + msec */

    document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
    timerID = setTimeout("chrono()", 10)
}
function chronoStart(){

    start = new Date()
    chrono()
}
function chronoContinue(){

    start = new Date()-diff
    start = new Date(start)
    chrono()
}
function chronoReset(){
    document.getElementById("chronotime").innerHTML = "0:00:00:000"
    start = new Date()
}
function chronoStopReset(){
    document.getElementById("chronotime").innerHTML = "0:00:00:000"
    document.chronoForm.startstop.onclick = chronoStart
}
function chronoStop(){
    document.chronoForm.startstop.value = "start!"
    document.chronoForm.startstop.onclick = chronoContinue
    document.chronoForm.reset.onclick = chronoStopReset
    clearTimeout(timerID)
}



</script>

Upvotes: 0

Views: 2159

Answers (4)

faiyaz syed
faiyaz syed

Reputation: 44

// Set value
localStorage.setItem(saveDiff, diff);


window.onload = function() {
    //retrieve value back after page load
    var saveDiff = localStorage.getItem(differenceValue);

}

Upvotes: 0

Aman Jain
Aman Jain

Reputation: 665

You can not keep a variable alive after refresh as variables are created in window which will get reloaded after refresh. 

var a = 10;
//You can access this variable as below 
console.log(a);//1st way
console.log(window.a);//2nd Way

So when the page gets refreshed, window gets reloaded.

Try to save your variables in the form of cookie(Old Traditional way)

document.cookie="key=value; key=value....."

Other options exists are:(Comparatively new.)

  1. in browser "HTML5 Web SQL Database"(Reference).

But some time ago, I tested and it was not working on ff.

  1. Local Storage. Below is the syntax:

    localStorage.setItem("start", "10");

The options discussed above are for client side. The value can also be saved at server side.

Upvotes: 2

Ajay Gaur
Ajay Gaur

Reputation: 5270

you can use browser's localStorage to achieve this action. As javascript does not work cross domain, either you should use localstorage or some back-end to achieve this functionality.

However when you use localStorage, the user can open up it's console and can use the command, localStorage.clear() to clear all browser's storage, so latter option is more reliable.

Upvotes: 0

ernest_k
ernest_k

Reputation: 45309

Within the scope of a page, there is no way to have variables that survive page reloads. You could attempt browser storage, but that's risky (user may have multiple windows/tabs open with the same page, resulting in confusion).

The top option is to keep date information on the server in the user's session context (store timer start date when first request is received).
Having that in the user's session, you will be able to detect that the user's timer had already started upon subsequent calls.

This option also shields you from potential problems linked to multiple tabs (though not multiple/different browsers)

Upvotes: 0

Related Questions