0

我正在尝试存储我的脚本，该脚本从 23,000 开始计数，以始终继续显示它是“实时的”并且始终使用 Web 存储进行计数。我已经尝试过实现这一点，到目前为止，我似乎无法让它发挥作用。什么是最好的解决方案来让它工作并且即使在刷新等时也能始终计数？我在下面包含了我的 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..
  }
4

1 回答 1

1

这是我的尝试：小提琴

逻辑：

  • 首次访问（无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. 不要将它用于重要的东西。
  • 当它使用localStorageAPI 时，如果用户在多个浏览器（或多个计算机/设备）中打开页面，每一个都会有不同的计数器。此外，清除所有个人数据将重置计数器。
  • 最后，有一个间隔周期舍入误差，它不考虑中断的间隔周期。例如，用户在一个间隔周期中途关闭页面，下一次他打开页面时，半周期将被丢弃并开始一个新的周期。我相信这是一个小细节，需要付出更多的努力才能解决，但我会把这个决定和努力留给你。
于 2014-03-19T19:23:01.163 回答