JavaScript 定時自增數字並本地持久化：localStorage 實現跨頁面刷新不重置

需求分析

頁面顯示一個數字，初始 100。每隔隨機 5/10/20 分鐘自增 1，關閉瀏覽器、刷新頁面數字不歸零，繼續增長。

核心思路：localStorage + setTimeout 遞歸

• 數據持久化：localStorage 存儲 currentNum 與 nextInterval。
• 定時器：setTimeout 遞歸調用，每次執行後重新隨機間隔。
• 頁面加載初始化：讀取本地存儲，無則用默認值。

完整代碼

<!DOCTYPE html>
<html><body>
<div id="counter" style="font-size:2rem;">100</div>
<script>
const KEY_NUM = 'auto_inc_num';
const KEY_TIME = 'auto_inc_time';
const INTERVALS = [5, 10, 20]; // 分鐘

function randomInterval() {
    return INTERVALS[Math.floor(Math.random() * INTERVALS.length)] * 60 * 1000; // 毫秒
}

function updateDisplay() {
    document.getElementById('counter').textContent = localStorage.getItem(KEY_NUM) || 100;
}

function scheduleNext() {
    const delay = randomInterval();
    localStorage.setItem(KEY_TIME, Date.now() + delay); // 可選：記錄下次執行時間
    setTimeout(runIncrement, delay);
}

function runIncrement() {
    let num = parseInt(localStorage.getItem(KEY_NUM) || '100', 10);
    num += 1;
    localStorage.setItem(KEY_NUM, num);
    updateDisplay();
    scheduleNext();
}

// 頁面載入初始化
updateDisplay();
// 若需恢復倒計時，可計算剩餘時間；簡化版直接重新隨機
scheduleNext();
</script>
</body></html>

局限與改進

• 用戶清理緩存會重置：需後端存儲（數據庫 + 用戶標識）實現真正持久。
• 多標籤頁同步：監聽 storage 事件同步更新。
• 精確時間：記錄 nextRunTime，頁面加載時計算剩餘延遲，避免間隔漂移。

總結

利用 localStorage 存儲狀態，setTimeout 遞歸實現隨機間隔自增，滿足前端無後端的持久化定時需求。