javascript - 倒计时器在新页面上重置

Question

我正在编写一个简单的战斗游戏，其中两个玩家选择他们的 Angular 色并进行战斗。战斗分为回合，每个回合从新页面开始，并有一个从99倒数到0的计时器。但是，我不知道如何让计时器在新页面上保留上一回合的时间。每次新回合开始时，计时器都会重置为 99。有什么办法可以解决这个问题吗？

<script>
      let timeLeft = 99;
      let elem = document.getElementById('timer');
      let timerId = setInterval(countdown, 1000);
      function countdown() {
          if (timeLeft == -1) {
              clearTimeout(timerId);
              doSomething();
          } else {
              elem.innerHTML = timeLeft;
              timeLeft--;
          }
        }
       function doSomething() {
          alert("Player x loses");
        }
</script>

Answer 1

只需设置一个小的 session 变量，并在每个页面加载开始时使用 if 语句检查它。如果 session 变量为空，请将其设置为您想要的值，否则，保留上次运行脚本时的先前值并从最后一个值启动它。

<script>
var timeLeft;
if(!sessionStorage.getItem('timer'){
     timeLeft = 99;
} else {
     timeLeft = sessionStorage.getItem('timer');
}

      let elem = document.getElementById('timer');
      let timerId = setInterval(countdown, 1000);
      function countdown() {
          if (timeLeft == -1) {
              clearTimeout(timerId);
              doSomething();
          } else {
              elem.innerHTML = timeLeft;
              timeLeft--;
              sessionStorage.setItem('timer', timeLeft);
          }
        }
       function doSomething() {
          alert("Player x loses");
        }
</script>