计数器需要坚持记住最后一个数字

Question

我找到了这个小提琴： https://jsfiddle.net/DinoMyte/sac63azn/3/

https://fiddle.jshell.net/DinoMyte/sac63azn/3/show/

var num = 10000000;

setInterval(function()
  {   
    num++;
    console.log(num);
    $('div').text(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
  },6000);

它几乎按照我想要的方式工作。这是一个计数器，每 6 秒，它会在数字上加一个 1。例如：数字从 10,000,000 开始，然后每隔 6 秒，它会在数字上加 1。问题是当用户刷新或重新加载页面时，这个数字会恢复到原来的 10,000,000。如果刷新或重新加载后，是否有可能从上次保存数字？坚持？例如：数字现在是 10,000,008，6 秒后是 10,000,009，然后用户点击离开或刷新或重新加载页面，它应该记住最后一个数字在哪里留下：10,000,009 并从那里开始计数。

Answer 1

您可以为此使用localStorage。

只需使用此代码

var num = localStorage.getItem('evaluatedTimer') || 10000000;

setInterval(function()
  {   
    num++;
    console.log(num);
    var currentTimer = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    localStorage.setItem('evaluatedTimer', currentTimer');
    $('div').text(currentTimer );
  },6000);

Answer 2

您可以将 var num 值设置为 javascript cookie。您可以使用以下 javascript 代码来创建、读取或删除 cookie val

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

因此，在您的情况下，您可以像这样保留 num 值

变量数 = 10000000;

setInterval(function()
  {   
    num++;
    createCookie('persist_num', num, 1);
    console.log(readCookie('persist_num'));
    $('div').text(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","));
  },600);