JavaScript Cookies – Baking Has Never Been So Easy!

Setting the cookies is the hard part, now I want to be sure I have a good function to delete my cookies.

Deleting a Cookie with JavaScript

This one is easy since all you need to do is set the cookie to an empty value and set the expiration back in time.

JavaScript

function deleteCookie(name) {
    var expDate = new Date();
    expDate.setHours( parseInt(expDate.getHours()) - 12 );
    document.cookie = name + "=; expires="+expDate.toUTCString()+";";
}

I choose to set it back 12 hours form the point at which the function is called. You can set it back further or closer but as long as the time is before the current time the cookie will expire and be removed.

---

Updating a JavaScript Cookie

When I modified the setCookie() function I made sure to set it up so we could use it to update the cookie. so just pass what you want to update to set cookie and it will overwrite a cookie that already exists with whatever new information you pass.

---

Retrieving a JavaScript Cookie

When it came to retrieving the cookie there were two options, splitting and looping to find the match, or using a regular expression. In all the benchmark tests I did calling the function 1000+ times with 10 cookies set I found that splitting and looping was faster than the regular expression but I will provide you with both of the functions I found to use:

JavaScript

// Splitting and Looping, I found this one was faster
function getCookie(name) {
    var curCookie = document.cookie.split("; ");
    for (var i=0; i < curCookie.length; i++) {
        var crumb = curCookie[i].split("=");
        if (name == crumb[0])
            return unescape(crumb[1]);
    }

    return null;
}

// Regular Expressions, I found this one was slower
function getCookieRegex(name){
    var cookie = document.cookie.match(new RegExp('(^|;)\\s*' + escape(name) + '=([^;\\s]*)'));
    return (cookie ? unescape(cookie[2]) : null);
}

Just pass the name of the cookie and these little functions will return your value.

Remember you only need one!

---

Summary

Now we can quickly set, update, retrieve and update cookies using JavaScript!

JavaScript

var expDate = new Date();
expDate.setHours( parseInt(expDate.getHours()) + 2 );
setCookie('newCookie','cookie value',expDate,'/');

setCookie('newCookie','brand new updated cookie value');

getCookie('newCookie');         //faster
getCookieRegex('newCookie');    //slower

deleteCookie('newCookie);

JavaScript cookies are easier than I remember them being!

Download

Download the complete JavaScript file functions.cookies.js

References

• Quirksmode Introduction to JavaScript Dates and Times
• Mozilla Developers Center DOM:document.cookie Documentation

Pages: 1 2

Tagged as: cookie, date, download, function, javascript, js