貯藏JS計數數字繼續使用HTML5 Web存儲

我想保存我的腳本，計算從23000開始一直不斷出現的數字是「活」的，並使用Web存儲始終計數。我已經嘗試過實現這一目標，至今我似乎無法完成它的工作。什麼是最好的解決方案，讓它工作和運行，即使在刷新等情況下也可以始終計數？ I've included my JS Fiddle和下面的代碼。任何幫助，慷慨讚賞！貯藏JS計數數字繼續使用HTML5 Web存儲

編輯：爲了澄清..我想有一個「活」的櫃檯總是會無論什麼時候你去的網頁，刷新它，不管。無論像我的腳本一樣，它總是會變得越來越大。但是，每次刷新它都會從23,000開始。

HTML

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

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.. 
    }

來源

2014-03-19 DoPeT

目前還不清楚你想要做什麼。您需要將數字存儲在本地存儲中還是存儲腳本？ –

@TilwinJoy試圖存儲這些數字以繼續計數，所以我們假設它最初是從23,000開始的，但是我在12天后回到同一頁面，可能在120,000（假設）。本質上，我試圖讓一個「活」的計數器總是會去，無論你什麼時候進入頁面，刷新它，不管。它總是會變得越來越大。 – DoPeT

沒有一些服務器端代碼，這是不可能的。 JavaScript根據請求執行 - 它不會始終保持活動狀態。 –

這裏是我的嘗試：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，如果用戶打開頁面在一個以上的瀏覽器（或一個以上的計算機/設備），每一個將具有不同的計數器。此外，清理所有個人數據將重置計數器。
最後，還有一個間隔循環舍入錯誤，它沒有考慮間隔循環中斷。例如。用戶在間隔週期中途關閉頁面，下一次他打開半週期將被丟棄並開始新頁面的頁面。我相信這是一個小細節，需要花費更多的努力才能解決問題，但我會把這個決定和努力留給你。

來源

2014-03-19 19:23:01

我不能要求更好的答案，並感謝你足夠的時間。再次感謝。 – DoPeT

貯藏JS計數數字繼續使用HTML5 Web存儲

回答

相關問題