jQuery & Cookies (get/set/delete & a plugin)

In this post I would like to share javascript functions that will help you easily get, set, delete and basically manage your cookies. Also, link to jQuery Cookie plugin, it’s improved version with more functions and of course easy to read and short examples on how to use these functions.

I will try to keep this post short and will not explain what cookies are and how to eat them. There are plenty of articles covering it already.

Here are javascript functions by Peter-Paul Koch to getCookie(), setCookie() and deleteCookie():

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 getCookie(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 deleteCookie(name) {
    setCookie(name,"",-1);
}
/*
  Changed function names from readCookie(), createCookie()
  and eraseCookie() to getCookie(), setCookie() and
  deleteCookie().
*/

Here is an example that shows you how to use those functions in your javascript to create, edit and delete your cookies:

// Create/write a cookie and store it for 1 day
setCookie('myCookie', 'myValue', 1);

// Get my cookie
getCookie('myCookie');

// Delete/erase my cookie
deleteCookie('myCookie');

These 3 javascript functions are all you need to manage your cookies, but if you want to do it in “jQuery style” than you can use jQuery Cookie plugin or it’s improved version.

Here is how to use jQuery Cookie plugin in your code:

// Setting a cookie
$.cookie('myCookie':'myValue');

// Creating cookie with all availabl options
$.cookie('myCookie2', 'myValue2', { expires: 7, path: '/', domain: 'example.com', secure: true });

// Get a cookie
$.cookie('myCookie');

// Delete a cookie
$.cookie('myCookie', null);

With an improved version of the plugin you can set and get multiple cookies in one call. The improved version of the jQuery Cookie pluin only adds few additional bytes. So it really worth it. 

// Set multiple cookies
$.cookie({ 'cookie1':'value1', 'cookie2':'value2' });