javascript - 浏览器页面重新加载后计时器刷新 - Javascript

Question

几天前，我在该平台人员的帮助下构建了一个倒计时器。我为此感谢他们所有人。但我遇到了另一个问题。当我刷新页面时，整个计时器都会重置，一切都会恢复正常。我查了一下，意识到我需要将秒存储在浏览器的本地存储中。但如何将其实现到我的代码中是问题。像我这样的类似问题有不同的解决方法。我尝试将其更改为他们的，但刷新页面时计时器不显示，并且必须禁用按钮时启用按钮。请帮忙。

HTML

<div class="mdl-card__actions mdl-card--border">
                        <div>Timer : <span  id="time1">05:00</span></div>
                            <div class="mdl-grid">

                            <div class="mdl-layout-spacer"></div>

                                <button id="coinbtn1" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--colored">
                            50 coins 
                            </button>
                            <div class="mdl-layout-spacer"></div>
                            </div>

                        </div>

JS

$("#coinbtn1").click(function() {

    var uid = firebase.auth().currentUser.uid;

    var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');

    var counter = 50;

    coinRef.transaction(function (counter) {
      return (counter || 0) + 50;
    }); 

  var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display);

});

function startTimer1(duration, display) {
  var timer = duration,
    minutes, seconds;


  var intervalFn1 = function() {

    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    display.textContent = minutes + ":" + seconds;

    if(timer-1 != 0){
    document.getElementById('coinbtn1').disabled = true;
  }

  if (timer-1 === 0) {

    clearInterval(myVar1);
    document.getElementById('coinbtn1').disabled = false;

  }

  --timer;


  }

  myVar1 = setInterval(intervalFn1, 900);

  intervalFn1();

}

之前使用的代码...

$("#coinbtn1").click(function() {

    var uid = firebase.auth().currentUser.uid;

    var coinRef = firebase.database().ref().child('users_coins').child(uid).child('coins');

    var counter = 50;

    coinRef.transaction(function (counter) {
      return (counter || 0) + 50;
    }); 

  /* var fiveMinutes = 60 * 5,
    display = document.querySelector('#time1');
  startTimer1(fiveMinutes, display); */

  $time_limit = "2016-08-14 00:10:00"
var d = new Date($time_limit);
var hours = d.getHours(); //00 hours
var minutes = d.getMinutes(); //10 minutes
var seconds = 60 * minutes; // 600seconds

if (typeof(Storage) !== "undefined") {
  if (localStorage.seconds) {
    seconds = localStorage.seconds;
  }
}

function secondPassed() {
  var minutes = Math.round((seconds - 30) / 60);
  console.log(minutes);
  var hours = Math.round((minutes) / 60);
  var remainingSeconds = seconds % 60;
  if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
  }
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("seconds", seconds);
  }
  document.getElementById('time1').innerHTML = "0" + minutes + ":" + remainingSeconds;

  if (seconds == 0) {
    clearInterval(myVar);
    document.getElementById('time1').innerHTML = "Time Out";
    if (typeof(Storage) !== "undefined") {
      localStorage.removeItem("seconds");
    }
  } else {
    seconds--;
    console.log(seconds);
  }

}
var myVar = setInterval(secondPassed, 900);

});

Answer 1

您可能希望在每次计时器计时时将其保存到 localStorage。像这样的事情:

localStorage.setItem('timerValue',timerValue);//假设timerValue已定义

当用户打开页面时，您需要检索所述项目:

var time = localStorage.getItem('time');

编辑:

我认为您的问题可能出在以下代码上:

if (localStorage.seconds) {
  seconds = localStorage.seconds;
}

在设置 localStorage 之前，您会检查它是否有一个名为 seconds 的属性，但第一次尝试保存 seconds 时，此属性将始终是未定义的。