HTMLでページを変更するときにスクリプトを実行し続ける

Question

したがって、「index.html」と「info.html」という2つのページがあるとします。 index.htmlのページには、ボタンとスパンがあります。ボタンを押すと、カウントダウンタイマーがそのスパンで開始します。タイマーがゼロになると何かが起こります。問題は、私がカウントダウンを開始すると、info.htmlページに行き、index.htmlに戻るとタイマーがリセットされるということです。もちろん、これはindex.htmlを離れるときにスクリプトがアンロードされることによって発生しますが、これを解決するにはどうすればよいですか？私がカウントダウンに50秒残っていて、index.htmlを離れると、info.htmlページに30秒滞在します。戻ってくると、20秒待ってください。 アイデア

Answer 1

ローカルストレージに残っている時間を保存できます。ページが更新された場合、スクリプトは、ローカルストレージから値をロードして、新しい値でタイマーを開始します：

function nonStopTimer(cb, seconds) { 
    var KEY = 'nonStopTimer' 
    var secsRemaining = localStorage[KEY]; 

    if (!secsRemaining) { 
    secsRemaining = seconds; 
    } 

    setTimeout(function() { 
    localStorage[KEY] = null; 
    cb(); 
    }, secsRemaining * 1000); 

    setInterval(function() { 
    secsRemaining -= 1; 
    localStorage[KEY] = secsRemaining; 
    }, 1000); 
} 

Answer 2

タイマー情報は、ローカルストレージまたはセッションストレージに保存してください（Web Storage参照）。だから、例えば、ページロードの

：

var countdownEndsAt = localStorage.getItem("countdownEndsAt"); 
if (countdownEndsAt) { 
    countdownEndsAt = +countdownEndsAt; 
    if (countdownEndsAt < Date.now() { 
     // It's already happened, decide what to do 
    } 
} 
if (!countdownEndsAt) { // Separate 'if' in case you decide to clear it in the "it's already happened" above 
    countdownEndsAt = Date.now() + 60000; 
    localStorage.setItem("countdownEndsAt", countdownEndsAt); // Gets converted to a string 
} 

countdownEndsAtは今、タイマーがオフに行くべき時間値が含まれています。