同一网络会话中的永久计数器

Question

尝试在网页上设置一个计数器，该计数器不会在同一用户会话中的每个不同页面视图上重新启动。目前正在使用此代码（到 Praveen Kumar Purushothaman），但每次查看不同页面时此计数器都会重置。

setTimeout(start, 0);
var i = 0;
var num = document.getElementById("number");

function start() {
  increase();
  setInterval(increase, 1000);
}

function increase() {
  if (i < 100000) {
    i += 10.41;
    num.innerText = i.toFixed(2);
  }
}

<span id="number"></span>

Answer 1

我的建议是将变量存储到会话存储中。我在评论中添加了更多详细信息：

setTimeout(start, 0);
// You're saving your current value here.
// Let's use localStorage. Set the i value if it doesn't exist for the first time.
if (!localStorage.getItem("i")) {
  localStorage.setItem("i", 0);
}
var num = document.getElementById("number");

function start() {
  increase();
  setInterval(increase, 1000);
}

function increase() {
  var i = localStorage.getItem("i");
  if (i < 100000) {
    i += 10.41;
    // When you're making any changes, make changes to the localStorage too.
    localStorage.setItem("i", i);
    num.innerText = i.toFixed(2);
  }
}

同一网络会话中的永久计数器

Perpetual counter within the same web session

session

counter