Help with some simple javascript cookie misconceptions

Question

im using the following code for setting/getting deleting cookies:

function get_cookie(cookie_name)
{
    var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');

    if (results)
     return ( decodeURI(results[2]) );
    else
     return null;
}


function set_cookie(name, value, exp_y, exp_m, exp_d, path, domain, secure)
{
    var cookie_string = name + "=" + encodeURI(value);

    if (exp_y)
    {
     var expires = new Date(exp_y, exp_m, exp_d);
     cookie_string += "; expires=" + expires.toGMTString();
    }

    if (path)
     cookie_string += "; path=" + encodeURI(path);

    if (domain)
     cookie_string += "; domain=" + encodeURI(domain);

    if (secure)
     cookie_string += "; secure";

    document.cookie = cookie_string;
}


function delete_cookie(cookie_name)
{
    var cookie_date = new Date();  // current date & time
    cookie_date.setTime(cookie_date.getTime() - 1);
    document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

but i am getting inconsistent results. for example, a cookie set on the startpage (www.example.com/start) , will not always show up on a subsequent page (www.example.com/foo/thing.jsp). i am setting a cookie "onUnload" of the page using

set_cookie("beginrequest", (new Date()).getTime(), null, null, null, "/");

and retrieving + deleting it "onLoad" via

loadDur = (new Date()).getTime() - get_cookie("beginrequest"); delete_cookie("beginrequest");

to measure the total amount of time the page took to load.

when using firebug, i often see "leftover" beginrequest-cookies and multiple instances of beginrequest with past timestamps.

how can i achieve to see just one beginrequest-cookie on every page?

Answer 1

Your code for set_cookie, get_cookie and delete_cookie seems to be correct. And your usage as well.

I think you should move this into your Java code - for me it seems an easier option than to hack this via cookies.

Answer 2

If you're getting old cookies that might be because your page contains a lot of content and onload isn't called before onunload (because the page doesn't finish loading). So delete the cookie by calling something like this from both onload and onunload:

var deleted_cookie = false;
function delete_timestamp() {
    if(!deleted_cookie) delete_cookie("beginrequest");
    deleted_cookie = true;
}

You might also have a race condition if you're loading the next page quick enough that the 'delete_cookie' cookie hasn't expired properly, and your get_cookie implementation is picking that up. So try changing the regular expression in get_cookie to only pick up cookies with a value:

var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]+)(;|$)');

Also, if you're viewing the site in more than one window (or tab), their cookies can get mixed up, so don't do that. But try using a global regular expression to pick up all the values, and only using the latest one.

Answer 3

i agree with amix on both counts: your code looks ok at first glance, and this would probably be better handled by something on the server side.

regardless, at a guess, i'd say the issue you're running into at the moment is likely that the events aren't firing the way that you think they are. two ways you can clear up what's happening, are by making it visually obvious that the event is firing , and by increasing the verbosity of your output. any number of things could be interfering with the events actually firing: plugins, addons, keypresses, etc. if you open a new window (or an alert, or whatever) when the onload and onunload events fire, you'll be able to tell for certain that the functions are being called. likewise, if you store more data in the cookies, like originating URL, etc, you'll be able to better figure out which pages are generating the extra cookies.

i'd guess that one of your Firefox extensions is intermittently interfering with the onunload event.

Answer 4

Echoing the other's suggestion to do some of the work on the server side - I've done this in the past:

1) Capture the time of request on the server side, and include a script tag with the time variable in the page:

<script type="text/javascript"> var start = 1224068624230;</script>

2) At the end of the page, in JavaScript, get a new time and calculate the total time.