Question

First off, let me preface this question by saying that my professor is firmly entrenched in the past. Our last assignment required us to float links on top of pictures.

You might also say that he’s insane as in order to test our pages he requires that all functionality (including cookies) be implemented with “client side technology” i.e. not on the server. He uses Firefox to test the pages, so the single blessing is that he doesn’t care about cross-browser compatibility.

That being said, I’m having a problem with our latest assignment. We’re making a “shopping cart” system using Javascript and cookies to store the items to be purchased. This is fine, except for some reason in my function that adds a new element to the cookie, assigning something to document.cookie doesn’t work.

You can find my entire site here ^{.zip file download} (if there’s anything that you wonder, “why on earth would you do that? That’s crazy!” – that’s either a direct assignment or a way to try and minimize the pain.)

This is my code in question that should be modifying the cookie:

var mycookies = new function (){
    var cookies = document.cookie.split(';');
    var cookie, values;
    this.items = [];
    for(var x = 0; x < cookies.length; x++){
        if(cookies[x] != ""){
            cookie = cookies[x].split('=')[0].trim()
            values = cookies[x].split('=')[1]
            values = values.split(',');
            if(!this.items[cookie]){
                this.items.push(cookie);
                this[cookie] = new function(){};
            }
            this[cookie].size = values[0];
            this[cookie].qty = parseInt(values[1]);
        }
    }
    this.render = function(){
        var values, cookies = "", cookie;
        for(var x = 0; x < this.items.length; x++){
            cookie = this.items[x];
            values = [this[cookie].size, this[cookie].qty].join(',');
            cookies += cookie + "=" + values + '; ';
        }
        return cookies;    
    }                      
    this.clear = function(){
        for(var x = 0; x < this.items.length; x++){
            delete this[this.items[x]];
        }                  
        this.items = [];
        document.cookie['expires'] = '26 Aug 1984 01:01:01 UTC;';
    }                      
    this.additem = function(){
        var i = document.forms[0].size.selectedIndex;
        if (this.items[page]){
            this[page].size = document.getElementById('size').value;
            this[page].qty = document.getElementById('qty').value;
        }                  
        else{              
            this.items.push(page);
            this[page] = new function(){};
            this[page].size = document.getElementById('size').value;
            this[page].qty = document.getElementById('qty').value;
        }
        console.log(this.render()); // For use with firebug
        document.cookie = this.render();
        console.log(document.cookie); // For use with firebug
    }
}

When I fire this off, firebug provides this output:

expires=12 Aug 2001 01:01:01 UTC,NaN; whitec=Small,3;
expires=12 Aug 2001 01:01:01 UTC,NaN

Now, I would expect 1) my cookie to have expired (I set the expiration manually through firebug, my parsing added the NaN later, – yet there it stays), and 2) the value for the cookie to be changed to the result of this.render()

Other than the obvious fact that client-side cookie behavior is not guaranteed by the w3 spec, am I missing something here? (EDIT – what I mean is when the page is client-side, opened as a file – not served by a server) This is really aggravating – I’ve tried a multitude of different angles, and no “javascript cookie” search or “modify cookies javascript” leads me to anything useful. Any suggestions about how I can fix it?

Or should I just email my professor with a link to the w3 specs and tell him that requiring us to support cookies client side is stupid?

Answer 1

The workings of document.cookie are not what you apparently think they are. When you set a value into the variable, you set one cookie at a time. Thus, if you wanted to set all the cookies you’re holding in your object, you’d loop through your “items” array and set document.cookie successively to each name/value pair (transformed into a “cookieName=cookieValue” string).

This is a fact in all modern browsers. See this Mozilla documentation page for example.

Other comments on the code, since you were nice enough to post it:

        cookie = cookies[x].split('=')[0].trim()
        values = cookies[x].split('=')[1]

Better to call “split” just once.

            this[cookie] = new function(){};

That’s essentially equivalent to this[cookie] = {}; to set the property to a new empty object.