如何在本地存储中存储计时器并在页面重新加载时恢复

Question

我的页面上有一个计时器，它从页面加载的那一刻开始计时，以分钟和秒为单位显示。 还有一个保存这次时间的保存按钮，当我们重新加载页面时，计时器应该从我们保存的时间开始计时。 但是在重新启动时它会写 NAN：NAN。 如何正确保存和恢复计时？

let timerInterval;
let timerStart;
let time = 0;
 
function updateTime() {
  time++;
  let mins = parseInt(time / 60);
  let secs = time % 60;
  if(mins < 10) {
    mins = '0' + String(mins);
  }
  if(secs < 10) {
    secs = '0' + String(secs);
}
document.querySelector('#timespan').innerHTML = `${mins}:${secs}`;  
} 
 
function startTimer() {
  timerInterval = setInterval(updateTime, 1000);
  time = 0;
  timerStart = true;
};
 
function stopTimer() {
  clearInterval(timerInterval);
  time = 0;
  timerStart = false;
}
 
document.querySelector('.save-btn').addEventListener('click', () => {
  localStorage.setItem('currentTime', document.querySelector('#timespan').innerHTML);
}
 
window.addEventListener('load', () => {
  document.querySelector('#timespan').innerHTML = localStorage.getItem('currentTime');
}, false );

Answer 1

您需要在调用startTimer之后解析localStorage内容以补充全局time变量（您发布的代码中未显示）。