如何在刷新后保持运行我的倒计时？

Question

我正在学习 JS，但我被困住了... 我想创建一个倒计时（已完成，我的倒计时正在运行），在重新加载页面时保持运行。我将 sessionStorage 用于 "save" 倒计时值，并在加载页面时检查 sessionStorage 是否存在。问题是，我不知道如何使用保存在 sessionStorage 中的值来保持运行倒计时。

你能帮帮我吗？

class Timer {

    constructor(secondes, minutes) {
        this.secondes = secondes;
        this.minutes = minutes;
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        this.storageCheck();
    }

    countdown(minutes) {
        var seconds = this.secondes;
        var mins = this.minutes; 
        var myCounter = this.counter; 
        function tick() {
            var current_minutes = mins-1;
            seconds--;
            myCounter.innerHTML = current_minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
            var duration = sessionStorage.setItem("timer", myCounter.innerHTML);

        if( seconds > 0 ) {
                setTimeout(tick, 1000);
            } else {
                if(mins > 1){
                    countdown(mins-1);           
                }
            }
        }
      tick();
    }

    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown(this.minutes);
        })
    }

    storageCheck() {
        if (sessionStorage.getItem("timer")) {
            // keep the countdown running
        }
    }
}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();

<!DOCTYPE html>
<html>
<head>
 <title>Test Countdown</title>
</head>
<body>

 <div id="counter"></div>
 <button id="button">Run</button>

 <script type="text/javascript" src="countdown.js"></script>

</body>
</html>

Answer 1

您可以使用存储检查功能来覆盖分钟和秒参数（如果存在）。

constructor(mins, secs) {
  this.mins = mins
  this.secs = secs
  this.checkStorage = this.checkStorage.bind(this)
  this.checkStorage(mins, secs)
}
checkStorage(mins, secs) {
  if(window.storage) { // or whatever
    this.secs = window.storage.secs
    this.mins = window.storage.mins
  }
}

类似的东西。基本上只是让 setStorage 函数更改已在构造函数中设置的值。

Answer 2

你可以通过这样做来做一个简单的技巧

window.onload = function() {
  let minutes = sessionStorage.getItem("minutes")
  let seconds = sessionStorage.getItem("seconds")
  let newTimer = new Timer(seconds, minutes);
};

并且在 sessionStorage 中而不是存储整个 innerHtml 存储分钟和秒，希望它能解决您的问题

Answer 3

在初始化 secondes 和 minutes 之前在构造函数中检查它们是否在 storage.If 它们不存在然后只设置 this.secondes = secondes 和 this.minutes = minutes;

   constructor(secondes, minutes) {
        this.button = document.getElementById("button");
        this.counter = document.getElementById("counter");
        if(!this.storageCheck()){ //check if seconds are mins are stored in storage
            this.secondes = secondes; //if not set mins and sec to value passed in constructor
            this.minutes = minutes;
        }
        else{
          this.countdown(this.minutes);
        }


    }

在存储检查功能中，检查值是否存在，如果存在则获取值并设置为this.secondes and this.minutes and return true else return false

  storageCheck() {
        //if both mins and secs exists
        if (sessionStorage.getItem("mins") &&sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
            this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
            return true;
        }
        else
          return false;
    }

并在倒计时功能中将值保存到存储器

sessionStorage.setItem("mins",vm.minutes);//set current min
            sessionStorage.setItem("secs",vm.secondes);//set current sec

在这里尝试运行这个：https://jsbin.com/bavexigute/1/edit?html,js,console,output

  class Timer {

    constructor(secondes, minutes) {
      this.button = document.getElementById("button");
      this.counter = document.getElementById("counter");
      if(!this.storageCheck()){ //check if seconds are mins are stored in storage
        this.secondes = secondes; //if not set mins and sec to value passed in constructor
        this.minutes = minutes;
       }
       else{
      this.countdown();
      }
    }

     countdown() {

       debugger;
       var vm=this;
        if(!(this.minutes-1<0))
           this.minutes--;
       let tick= function(){

           vm.secondes--
           if(vm.secondes==0){
              vm.secondes=59;
              vm.minutes--;
           }
           vm.counter.innerHTML =  vm.minutes + ":" + (vm.secondes < 10 ? "0" : "") + vm.secondes;
           if(vm.minutes == 0 && vm.secondes-1==0){
            vm.secondes--; 
            vm.counter.innerHTML =  vm.minutes + ":" + vm.secondes-1;

            }    
           else{
             setTimeout(tick,1000);
           }
           sessionStorage.setItem("mins",vm.minutes);//set current min
           sessionStorage.setItem("secs", vm.secondes);//set current sec
         }
        setTimeout(tick,1000);
     }    



    buttonClick() {
        button.addEventListener("click", () => {
            this.countdown();
        })
    }

    storageCheck() {
        //if both mins and secs exists
        if (sessionStorage.getItem("mins") && sessionStorage.getItem("secs")) {
            // keep the countdown running
            this.minutes=parseInt(sessionStorage.getItem("mins"));//get min
            this.secondes=parseInt(sessionStorage.getItem("secs"));//get secs
            return true;
        }
        else
          return false;
    }

}

let newTimer = new Timer(60, 20);
newTimer.buttonClick();

如何在刷新后保持运行我的倒计时？

How to keep running my Countdown after a refresh?

javascript

countdown

page-refresh

session-storage

如何在刷新后保持 运行 我的倒计时？

How to keep running my Countdown after a refresh?

javascript

countdown

page-refresh

session-storage

如何在刷新后保持运行我的倒计时？