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

From: http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

 

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');

This 3 javascript function is all you need manage your cookies, but if you want to do it 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.

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