Working with cookies in JS

Well, it has certainly been a while since I’ve blogged.

I’ve been working with data-driven tables a little bit recently, and the need came up to allow users to click on the table cells, and to persist a record of these clicks. Rather than store this in the database, it made more sense to use cookies. Not having worked with cookies for a while, I started playing around. I ran into a few gotchas.

FIRST GOTCHA: Cookies can only be managed in the context of a web server.

Everything started great. I found some sample code online to base the solution off of, and I began to I hooked all the events in, but data wasn’t persisting. No errors were being thrown. After some debugging work, it looked like it was never being set. Incidentally, this was because I was running the file off the file system (file://clickClick.html). No errors are thrown, no warnings are raised, it just won’t set unless you run it from a web server. After starting up Apache and running it from localhost, everything worked great. For a while.

SECOND GOTCHA: With jQuery, the unload event is on ‘window’, not ‘document’

My plan was to save the click results to a cookie when the page leaves, either via refresh or leaving the page altogether. Not bothering to read the documentation thoroughly, I tried this and expected it to work:

$(document).unload(function() {   ...   });

Turns out it didn’t. After some trawling of jquery’s documentation, I discovered it was the window object I wanted to hook into, not document. As with the cookies, this didn’t fire off an error, it just hooks into a user-created event that, unsurprisingly, is never fired by the browser. Switching ‘document’ to ‘window’ fixed this.

FINAL GOTCHA: Internet Explorer does not seem to support character indexing via [] operator

My method of saving data to a cookie is serializing a table into a string of ‘1’s and ‘0’s and storing it in a cookie, then reading that string back from the cookie and acting on it. Firefox and Chrome could handle reading individual characters fine by indexing the string like an array:

if(oldCookieVal[i] === '1') {
              ...
}

When testing on IE, I got an “unsupported property” error. Turns out IE treats strings like any other object, and will use indexing to perform a property lookup on the object. So if i = 3, instead of retrieving the fourth character in a string, IE was trying to do this:

if(oldCookieVal.3 === '1') {
              ...
}

Which broke the code. Switching to using the ‘charAt’ js function fixed this. Another solution would’ve been to split the string into an array before processing it.

With these lessons learned, I successfully created a working prototype of a solution. You can see the final result here. It has been tested on Firefox 3.5.19, 6.0.2, Chrome 14, IE 9, Safari 5, and Opera 11.01/11.51. Presently there’s an issue with Opera not hooking into the unload event through jQuery, but moving the cookie setting code into the ‘mousedown’ event handler solves this.