Cookie based countdown timer doesn't work

Question

EDIT: Thanks to answers, some issues are solved, however it is still not working properly. It now shows the correct countdown on first page load, but once cookie is set and you reload the page, it shows wrong time which also restarts with every reload. I have updated my code below accordingly.

I've been searching for a solution for days and nothing worked as I need it to. My goal is quite simple - I need a timer that would count down for 3 days and then repeat itself. In fact it can be either the same for everybody (with server defined time) or local (depending on user's time of first visit). I need it to not refresh on a page reload nor on the end of a day.

So I came to conclusion that I would need cookies: when you first enter the page the timer starts counting down untill 3 days from now on. If you leave the website and come in 2 days there will be 1 day remaining. If you leave and come again after a week, the timer starts counting 3 days again.

For the coundown I use plugin by Keith Wood. For cookies I use plugin by Klaus Hartl. Here is my code so far:

$(document).ready(function(){

    if (!$.cookie('offerTimer')){
        var now = new Date(); 
        timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3); 
        cookie = $.cookie('offerTimer', timerValue, { expires: 7, path: '/' });
    }else {
        cookie = $.cookie('offerTimer');
    }

    $('#until3d').countdown({until: cookie, format: 'HMS'});
    console.log('cookie is ' + cookie);
});

On the first page load (when cookies aren't set) cookie returns:

offerTimer=Tue%20Jan%2007%202014%2000%3A00%3A00%20GMT%2B0800%20(%D0%9A%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D1%8F%D1%80%D1%81%D0%BA%D0%BE%D0%B5%20%D0%B2%D1%80%D0%B5%D0%BC%D1%8F%20(%D0%B7%D0%B8%D0%BC%D0%B0)); expires=Thu, 30 Jan 2014 09:09:37 GMT; path=/

On the second and following visits cookie returns:

Tue Jan 07 2014 00:00:00 GMT+0800 (Красноярское время (зима)) 

Cyrillic symbols there, because I'm from Russia. I'm almost sure that all I probably need is to make cookies return the date in corresponding format, so that countdown function works properly. But I don't get how can it show the correct time with the first output... Also I tried to set the format of the date to the format of countdown plugin (for that I used other plugins) and the result was either the same or it didn't work at all.

PS: I know that it's easy to bypass such timer, but it's not considered as an issue in this case.

EDIT: Changed the code a bit, thanks to user2310289.

Answer 1

I finally managed to get it working. The solution is quite simple.

I used plugins to make it easier (among with jQuery, of course):

<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="date.format.js"></script>

And here is my code:

$(document).ready(function(){

    if (!$.cookie('offerTimer')){
        var now = new Date(); 
        timer = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 3);
        $.cookie('offerTimer', timer.format("yyyy, mm, dd"), { expires: 7, path: '/' });
    }

    var cookie = $.cookie('offerTimer');

    $('#until3d').countdown({until: new Date(cookie), format: 'HMS'});
});

I hope this could be helpful for somebody in the future, since it took me so long to figure out and I didn't find a solution for this exact countdown task. And thanks for the answers that pointed out some of my mistakes!

Answer 2

The statement

if (cookie === "undefined")

is a problem. You cannot compare a javascript undefined with string "undefined". That is the reason why your code does not enter the if condition.

Either do

if (!cookie)

or

if (('' + cookie) === "undefined")

Answer 3

For a start now is not defined

var threeDays = new Date();
now.getFullYear(), now.getMonth(), now.getDay() + 3

maybe use the threeDays variable as in

threeDays.getFullYear(), threeDays.getMonth(), threeDays.getDay() + 3

Also I think you want to do

var timerValue = new Date(now.getFullYear(), now.getMonth(), now.getDay() + 3);

And lastly (maybe) no quotes are needed around the undefined key word.