Question

我试图存储我的脚本，从23,000开始计算数字，总是继续显示它＆＃34;生活＆＃34;并始终使用Web存储计数。我已经尝试过实现这一点，到目前为止，我似乎无法让它发挥作用。什么是最好的解决方案，让这个工作和功能总是计数，即使刷新等？ I've included my JS Fiddle以及下面的代码。任何帮助都很感激!!

编辑：澄清..我试图拥有一个＆＃34;直播＆＃34;无论你什么时候去页面，刷新它，无论如何，反击总是会进行。无论我的脚本如何，它总是会变得越来越大。但是，每次刷新它都会以23,000开始。

HTML

<span id="liveNumbers">23,000</span>

JS

if(typeof(Storage)!=="undefined")
  {
       setInterval(function(){
       random = (Math.floor((Math.random()*2)+1));
       var plus = Math.random() < 0.5 ? 1 : 1;
       random = random * plus; 
       currentnumber = document.getElementById('liveNumbers');
       var curnum = parseInt(currentnumber.innerHTML.replace(",",""));

       document.getElementById('liveNumbers').innerHTML = 
           commaSeparateNumber(curnum + random);
       }, 3000);

       function commaSeparateNumber(val){
       while (/(\d+)(\d{3})/.test(val.toString())){
          val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
       }
       return val;
     }
  }
else
  {
  // Sorry! No Web Storage support..
  }

Answer 1

这是我的尝试：fiddle

逻辑：

首次访问（无localStorage数据）时，计数器将重置为23000。
当页面打开时，计数器会运行。
关闭页面时，当前计数器值与当前时间戳（lastSessionEnd）一起存储。
当用户再次加载页面时，自关闭页面以来经过的时间被转换为间隔周期，传递给randomRange函数并从上一个会话添加到存储的计数器。

以下是代码：

if(window.localStorage) {
    //configs
    var updateInterval = 3000; //ms
    function randomRange() {
        return Math.floor(Math.random()*3)+1; // [1..3] range
    }


    var counter = +localStorage.getItem('counter');
    if (!counter) { //first load
        counter = 23000;
    } else { //simulate randomness that would have happened while the user was away from the page
        var lastSessionEnd = +localStorage.getItem('lastSessionEnd');
        for(var l = Math.floor((getUnixTimeStamp() - lastSessionEnd)*1000/updateInterval); l--;) {
            counter += randomRange();
        }
    }

    var liveNumbers = document.getElementById('liveNumbers'); //cache DOM query
    function refreshDisplay() {
        liveNumbers.innerHTML = commaSeparateNumber(counter);
    }
    refreshDisplay();
    setInterval(function() {
        counter += randomRange();
        refreshDisplay();
    }, updateInterval);

    function commaSeparateNumber(val) {
        while (/(\d+)(\d{3})/.test(val.toString())){
            val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
        }
        return val;
    }

    function getUnixTimeStamp() {
        return Math.floor(Date.now()/1000);
    }

    window.addEventListener('beforeunload', function() {
        localStorage.setItem('counter', counter);
        localStorage.setItem('lastSessionEnd', getUnixTimeStamp());
    });
} else {
  // Sorry! No Web Storage support..
}

注意：这不完美，以下是警告：

由于纯粹是在前端完成，因此操纵localStorage很容易破解。不要将它用于重要的事情。
当它使用localStorage API时，如果用户在多个浏览器（或多个计算机/设备）中打开页面，则每个浏览器将具有不同的计数器。此外，清洁所有个人数据将重置柜台。
最后，有一个间隔周期舍入误差，它没有考虑到中断的间隔周期。例如。用户在间隔周期的中途关闭页面，下一次打开页面时，半周期将被丢弃并且新的页面将开始。我相信这是一个小细节，需要花费更多精力来解决它的价值，但我会把这个决定和努力留给你。

存储JS计数数字以继续使用HTML5 Web存储

1 个答案: