Working with Cookies in jQuery

January 21, 2013

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 file jquery.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:

<head>
  <script src="path/to/jquery.js"></script>
  <script src="path/to/jquery.cookie.js"></script>
</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 path, domain, expires, 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:

$.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:

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

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.

$.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:

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

To retrieve the user’s favourite city:

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

To retrieve the name of the user:

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 and domain, otherwise the operation will fail. Now, let’s see a couple examples of the removeCookie() method.

To remove the cookie storing site visits:

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

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

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

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

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

Conclusions

This article showed you how to manage cookies using jquery.cookie, a jQuery plugin. It solves many problems by abstracting cookie implementation details into a few simple, flexible methods. In case you need further clarification or additional examples, please refer to the official documentation.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like jQuery: Novice to Ninja: New Kicks And Tricks.
Comments on this article are closed. Have a question about jQuery? Why not ask it on our forums?

JavaScript: Novice to Ninja, 2nd Edition