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

Question

我在尝试使用本地存储值在网页上保存计时器时遇到问题，导航到另一个页面，然后从单击初始页面保存的值重新启动计时器。

我有几秒钟的时间工作，但在分秒必争中挣扎，不确定自己做错了什么。

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

如有任何帮助，我们将不胜感激，谢谢。

这是代码：

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>

Answer 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 />');
}

这是JS Fiddle演示