存储 JS 计数以继续使用 HTML5 网络存储

Question

我正在尝试存储我的脚本，该脚本从 23,000 开始计数，以始终继续显示它是“实时”的，并且始终使用 Web 存储进行计数。我已经尝试过实现这一点，到目前为止，我似乎无法让它发挥作用。什么是最好的解决方案来让它工作并且即使在刷新等时也能始终计数？ I've included my JS Fiddle 和下面的代码。任何帮助都将不胜感激！

编辑：澄清..我试图让一个“实时”计数器始终运行，无论您何时访问页面，刷新它，无论如何。就像我的脚本一样，它总是会变得越来越大。但是，每次我刷新它都会从 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，如果用户在多个浏览器（或多个计算机/设备）中打开该页面，每个浏览器都会有不同的计数器。此外，清除所有个人数据将重置计数器。
• 最后，有一个间隔周期舍入错误，它不考虑中断的间隔周期。例如。用户在间隔周期中途关闭页面，下次他打开页面时，半周期将被丢弃并开始新的周期。我相信这是一个小细节，需要付出更多的努力才能解决，但我会把这个决定和努力留给你。