Working with Cookies in jQuery

Cookies are the most used technology for storing data on the client side. My previous article, How to Deal with Cookies in JavaScript, explained how to perform CRUD operations with cookies using raw JavaScript. This article turns to jQuery, and will guide you through the use of jquery.cookie, a plugin which makes cookie processing simple.

This article assumes that the reader is familiar with the content from the previously cited post, or at least has a basic understanding of cookies. With that said – let’s get started.

Installing jquery.cookie

The first thing you need to do is download jquery.cookie from its repository on GitHub. Once you have the filejquery.cookie.js, you simply need to add it in your page(s). Be aware that, being a jQuery plugin, you have to include it after the jQuery library. Your pages should have a piece of code that resembles the following:


1 <head>
2   <script src="path/to/jquery.js"></script>
3   <script src="path/to/jquery.cookie.js"></script>
4 </head>

The Methods

To both create and retrieve a cookie, jquery.cookie uses the same method, cookie(), but with a different number of parameters. To create a cookie you need to pass in two required parameters, the name and value of the cookie, respectively. You can pass a third, optional, parameter that is an object literal containing some additional options. These options are pathdomainexpires, and secure. It’s worth noting that these options can be set locally, when you call the cookie() method, or globally through the $.cookie.defaults object. The options set using the former, take priority over those set using the latter. To see how cookies are created, let’s look at a few examples.

The following example tracks the number of times the user has visited a website:

1 $.cookie("visits", 10);

This example stores the user’s favourite city, as well as specifying the domain and the path where the cookie can be read and written:

1 $.cookie("favourite-city""London", {path: "/", domain: ""});

This example stores the name of the user. This particular cookie expires on October 29, 2013 at 11 a.m., and can only be sent through a secure connection.

1 $.cookie("name""Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});

Retrieving Cookies

Retrieving a cookie is extremely easy. You just pass a single parameter, the name of the cookie, to retrieve it, as shown by the following examples:

To retrieve the number of times the user has visited the website:

1 console.debug($.cookie("visits")); // print "10"

To retrieve the user’s favourite city:

1 console.debug($.cookie("favourite-city")); // print "London"

To retrieve the name of the user:

1 console.debug($.cookie("name")); // print "Aurelio"

Delete a Cookie

Now you know how to create and retrieve a cookie. The last thing you need to know is how to delete a cookie using the removeCookie() method. It returns true if the requested cookie is found, and false otherwise. Be aware that when you want to remove a cookie, you need to pass in the same options, such as path anddomain, otherwise the operation will fail. Now, let’s see a couple examples of the removeCookie() method.

To remove the cookie storing site visits:

1 $.removeCookie("visits"); // successfully deleted

To remove the cookie storing the user’s favourite city:

1 $.removeCookie("favourite-city", {path: "/", domain: ""}); // successfully deleted

Next, we attempt to remove the cookie storing the user’s name. This example fails because the secure value was not specified.

1 $.cookie("name"); // fails because the secure value is missing

About the author

PHP | MVC | Codeignitor | Zend | Yii | Smarty | Android | Laravel Expert Senior Software Developer.I love my job and feel happy to working on new ideas and technologies.

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Name (required)
Email (required)