JavaScript 定时器和 sessionStorage

Question

我有以下问题。我有一个计时器函数，它需要一个参数，即秒数。直接通过的话，就可以正常工作，没有任何缺陷。但是，出于多种原因，我需要使用 sessionStorage，并且当我在将变量传递给计时器函数之前从 sessionStorage 检索变量时，它会乘以参数中传递的秒数的 10 倍。我不明白为什么它有这种行为。我写了一个最小的例子来说明我的问题：

function countdown(time_p) {

  var saved_countdown = sessionStorage.getItem('saved_countdown');

  var time;

  if (saved_countdown == null) {

    // Set the time we're counting down to using the time allowed

    var new_countdown = new Date().getTime() + (time_p + 2) * 1000;

    time = new_countdown;

    sessionStorage.setItem('saved_countdown', new_countdown);

  } else {

    time = saved_countdown;

  }

  // Update the count down every 1 second

  var x = setInterval(() => {

    // Get today's date and time

    var now = new Date().getTime();

    // Find the distance between now and the allowed time

    var distance = time - now;

    // Time counter

    var counter = Math.floor(distance / 1000);

    // Output the result in an element with id="demo"

    document.getElementById("demo").innerHTML = counter + " s";

    // If the count down is over, write some text 

    if (counter <= 0) {

      clearInterval(x);

      sessionStorage.removeItem('saved_countdown');

      sessionStorage.removeItem('max_time');

      document.getElementById("demo").innerHTML = "EXPIRED";

    }

  }, 1000);

}

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

  var time = $("#time").val();

  console.log("time entered" + time);

  sessionStorage.setItem('max_time', time);

  time = sessionStorage.getItem('max_time'); // multiply the time entered by 10 ...

  // time = 42; // works well

  console.log("time = " + time);

  countdown(time);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">

</script>

<p id="demo"> </p>

<label for "time"> Time limit :</label>

<input type="text" id="time" placeholder="enter a duration (s)"> <br>

<button type="button" id="confirm_settings">OK</button>

Answer 1

窗口存储保存字符串。您需要将它们转换为整数：function countdown(time_p) {&nbsp; var time = sessionStorage.getItem('saved_countdown');&nbsp; if (time) {&nbsp; &nbsp; time = +time; // cast the string to number&nbsp; }&nbsp; else {&nbsp; &nbsp; // Set the time we're counting down to using the time allowed&nbsp; &nbsp; var new_countdown = new Date().getTime() + (time_p + 2) * 1000;&nbsp; &nbsp; time = new_countdown;&nbsp; &nbsp; sessionStorage.setItem('saved_countdown', new_countdown);&nbsp; }&nbsp;