JavaScript Site - Countdown Timer

Question

I am looking to create timer which starts a countdown timer. The code works fine until you change the page. As the timer runs through the loop and starts the timer again.

Ideally I want the timer to countdown regardless of the page on the entire domain.

In addition, if $sessionDecline is clicked I want a 10 minute timer be invoked, otherwise $sessionAccept to return to the homepage with a counter of 5 minutes.

var SessionTime     = 2000,
    tickDuration    = 1000,
    $sessionAccept  = $('#session--accept'),
    $sessionDecline = $('#session--decline');

if ( Modernizr.localstorage && lscache.get('sessionActive') === null ){

    var myInterval  = setInterval(function(){

            SessionTime = SessionTime - tickDuration

        }, 1000),

        myTimeOut   = setTimeout(SessionExpireEvent, SessionTime);

} else if ( Modernizr.localstorage && lscache.get('sessionActive') === true ){

    SessionTime = 6000;
    var myInterval  = setInterval(function(){

            SessionTime = SessionTime - tickDuration

        }, 1000),

        myTimeOut   = setTimeout(SessionExpireEvent, SessionTime);

}

function SessionExpireEvent() {
    clearInterval(myInterval);

    $('#timout--popup').addClass('is--loaded');

    $sessionAccept.click(function(){

        window.location.href = '/';

        lscache.set('sessionActive', true);

        $(this)
            .closest('.overlay__wrapper')
            .removeClass('is--loaded');
    });

    $sessionDecline.click(function(){
        lscache.set('sessionActive', false);

        $(this)
            .closest('.overlay__wrapper')
            .removeClass('is--loaded');
    });
}

I am using:

jQuery v1 / ls-cache / custom modernizr

Answer 1

Sorry in advance for not making a coded example.

I would figure out what the date/time of the 10 or 5 minutes from now would be and write that value to a cookie which you can do in jQuery like this $.cookie("test", 1);

Then calculate the milliseconds from now until your target value and set your timeout for that many milliseconds.

on page load check to see if your cookie is set using $.cookie("test"); if it is set, then use that value to set your timeout, if not, then calculate your timeout and set the cookie.

Also make sure to destroy the cookie in your function using $.removeCookie("test");