使用本地存储和javascript保存计时器

时间:2014-04-28 10:30:54

标签: javascript html timer storage local

我在尝试使用本地存储值来保存网页上的计时器,导航到另一个页面,然后从点击初始页面时保存的值再次启动计时器时出现问题。

我有工作的时间,但在分钟和时间上挣扎,不知道我做错了什么。

我可以将已保存的分钟和小时值输入到公式中,但由于公式每秒都会动态更新,因此无法正常工作。

对此的任何帮助都将非常感谢,谢谢。

以下是代码:

var secondtime = localStorage.getItem("Seconds");
var minutetime = localStorage.getItem("Minutes");
var hourtime = localStorage.getItem("Minutes");
var sec = localStorage.getItem("Seconds");

setInterval( function(){

document.getElementById("text").innerHTML;
document.getElementById("seconds").innerHTML=pad(++sec%60);
document.getElementById("minutes").innerHTML=pad(parseInt(sec/60,10));
document.getElementById("hours").innerHTML=pad(parseInt(sec/6000,10));
}, 1000);

function SaveTime() {
    localStorage.setItem("Seconds", $("#seconds").text())
    localStorage.setItem("Minutes", $("#minutes").text())
    localStorage.setItem("Hours", $("#hours").text())
}

$(document).ready(function(e) {
$("#seconds").text(secondtime);
$("#minutes").text(minutetime);
$("hours").text(hourtime);

<div class="Bottom_Bar">

<p class="c1" id="seconds_text"><span id="seconds">00</span></p>

<p class="c1" id="minutes_text"><span id="minutes">00</span></p>

<p class="c1" id="hours_text"><span id="hours">00</span></p>

<div class="Button">
 <a href="NextPage.html"> onclick="SaveTime()</div>

1 个答案:

答案 0 :(得分:1)

首先我要提醒你的是,你正试图将minuts分配给hourTime变量,看看你的初始化

var hourtime = localStorage.getItem("Minutes");

以下是存储和检索本地存储时间的简单代码

<a href="#" onclick="SaveTime()">Save Current Time</a> | 
<a href="#" onclick="retrieveTime()">Retrieve Saved Time</a>

<div id="result"></div>

function SaveTime(){
    var date = new Date();
    var timeObj = { sec:date.getSeconds(), min:date.getMinutes(), hr:date.getHours() };
    localStorage.setItem("timeObj", JSON.stringify(timeObj));
    $('#result').append(JSON.stringify(timeObj)+' -- > Saved<br />' );
}

function retrieveTime(){
    var timeObj = JSON.parse(localStorage.getItem("timeObj"));
    //You have the time with you now
    $('#result').append(timeObj.hr+':'+timeObj.min+':'+timeObj.sec+' --> Retrieved<br />');
}

Here is JS Fiddle Demo