Why isn't my cookie being set?

Question

I am learning, please be kind if it is an obvious mistake.

/*set cookie*/
function setCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    setCookie(name,"",-1);
}


$(window).load(function() {
//check for the cookie
    var language = readCookie('language');
//if  null show red
    if (language!=null)
    {
        $('.blue').hide();
        alert('No cookie set'); 
    }
//if  null show red
    else if (language!=red)
    {
        $('.blue').hide();
        alert('The cookie is red'); 
    }
//if blue show blue
    else {
        $('.red').hide();
        alert('The cookie is set to blue'); 
    }


    $('#blue').click(function() {
            $('.red').hide();
            $('.blue').show();
            setCookie('language','blue', 30);
            alert('The cookie is set to blue'); 
        });

    $('#red').click(function() {
            $('.red').show();
            $('.blue').hide();
            setCookie('language','red', 30);                
            alert('The cookie is set to red'); 
        });
});

Thank-you.

Answer 1

If you're learning the best answer to your question here would probably be some debugging tips. What are you using for debugging?

Have you tried Firebug in Firefox. http://getfirebug.com/ This will let you step through your code one line at a time and inspect exactly what it is doing, what values are really being passed to functions, and exactly what string you are assigning to document.cookie.

Answer 2

Learning to use Firebug is the best advice. Another helpful tool is a colorizing editor. Even SO provides a little help of this kind. Note the line:

    else if (language!=red)

"red" wasn't colored as a string, so it stood out by not standing out. Is there a variable named "red" defined somewhere in the original code? If not, this compares language to undefined.

Also, consider the lines that follow this statement:

    else if (language!='red') {
        $('.blue').hide();
        alert('The cookie is red');

You just tested that the cookie value was not red, but you alert that it is. You make a similar mistake on the first test:

    if (language!=null) {
        $('.blue').hide();
        alert('No cookie set');

language is not null, but the message you display suggests it is.

This isn't related to your question, but there are some simplifications you can make. For one, jQuery defines a trim method on String to remove leading and trailing whitespace. Make use if this in readCookie rather than the while (c.charAt(0)==' ') loop.

Another improvement is that the current technique of choosing an element to show by using a sequence of if blocks doesn't scale well. Your homework is to use string operations and whatnot to better handle an arbitrary number of elements, then add ".green", ".yellow", ".magenta" and ".cyan" elements. You might need to change the default behavior from showing all .color elements to hiding them. Using objects as associative arrays may also be helpful.