Question

在下面的代码中，即使我重新加载页面，我也希望保存计时时间。保存为静态的变量是“diff”。因为当我重定向到同一页面时，我需要我的计时器来返回我保存的时间。此代码在标题部分中声明。这段代码没有这样做，我怎么做到这一点？ `



<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>

Answer 1

在刷新后无法保持变量处于活动状态，因为在窗口中创建了变量，这些变量将在刷新后重新加载。

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

因此，当页面刷新时，窗口会重新加载。

尝试以cookie的形式保存变量（旧传统方式）

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

存在的其他选择是:(比较新。）

Reference

。

但前段时间，我测试了它并没有在ff上工作。

本地存储。以下是语法：

localStorage.setItem（“start”，“10”）;

上面讨论的选项适用于客户端。该值也可以保存在服务器端。

Answer 2

在页面范围内，没有办法让页面重新加载的变量。您可以尝试浏览器存储，但这样做有风险（用户可能会在同一页面打开多个窗口/标签页，从而导致混淆）。

顶部选项是在用户的会话上下文中保留服务器上的日期信息（收到第一个请求时存储计时器开始日期）。
在用户的会话中，您将能够检测到用户的计时器在后续呼叫时已经启动。

此选项还可以防止您遇到与多个标签链接的潜在问题（尽管不是多个/不同的浏览器）

Answer 3

尝试使用本地存储，这将帮助您节省价值，并在页面重新加载时恢复。

http://www.w3schools.com/html/html5_webstorage.asp

Answer 4

您可以使用浏览器的localStorage来实现此操作。由于javascript无法跨域工作，您应该使用localstorage或一些后端来实现此功能。

但是，当您使用localStorage时，用户可以打开它的控制台，并可以使用命令localStorage.clear（）清除所有浏览器的存储空间，因此后一选项更可靠。

Answer 5

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


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

}

如何在刷新页面时使用Javascript保存静态变量

5 个答案: