Persistent timer

Click Run after the timer starts to reload the page and observe the timer picking up from where it left off.

by Evan Chavez

HTML

<div>Time remaining: <span id="timer"></span></div>

JavaScript

var interval = 30000;

function reset() {
    localStorage.endTime = +new Date + interval;
}

if( ! localStorage.endTime ) {
    reset();
}

setInterval( function() {
    var remaining = localStorage.endTime - new Date;
    if( remaining >= 0 ) {
        $('#timer').text( Math.floor( remaining / 1000 ) );
    } else {
        reset();
    }
}, 100 );