Getting and Setting Cookies with jQuery

Getting and Setting Cookies with jQuery
October 12, 20090 Comments

jQuery is one of the most versatile JavaScript libraries today. Extending it's functionality one step further, we can use cookies to enhance the user experience by helping the browser remember user site preferences, login details and more.

If you notice the sidebar of this site, when clicking the title header or plus/minus icon it expands and contracts the content below it. It also sets a cookie remembering the position of the content, so when you open or close something, it stays that way until it is clicked again, the cookie expires or is deleted. This tutorial will show you how to easily implement cookies using jQuery and use them in your site development. There will also be a working example and a sample file for you to download at the end of the tutorial.

Setting up Scripts

Since we're using a plugin for this demonstration, download that first and upload it to your server. You can grab the plug-in from here.

As always, when using jQuery make sure you have the library linked in your header (or footer above the closing body tag) by using the version you have uploaded to your server or the Google hosted version, and also add link to your cookie plug-in file.

Setting the Cookie

Setting a cookie with jQuery is as simple as:

$.cookie("example", "foo");

For an example on it's usage, I've created a function to set the cookie, gave it a name and set the variable of it's state that will be used later when the cookie is called. For this example I'm using the script I wrote for the sidebar toggle function. I named the cookie comments and it's state is collapsed when the function is ran and the content is hidden.

$("#recent-comments-3 h2").toggle(function() {
	$("#recent-comments-3 h2").css("background-position", "0 -34px");
	$("#recent-comments-3 ul").slideUp("slow");
  //set the name and value of the cookie
	$.cookie('comments', 'collapsed');

Now the other function that shows the content shares the same name but it's state when the function is ran is expanded instead of collapsed. We need these states to check against when calling the cookie to set our end result on page load. We'll get into that in a second.

function () {
	$("#recent-comments-3 h2").css("background-position", "0 0px");
	$("#recent-comments-3 ul").slideDown("slow");
  //set the name and value of the cookie
	$.cookie('comments', 'expanded');

Checking the Cookie

Continuing our example, once the page has loaded our script checks the state variable (expanded or collapsed) that was set up earlier in this tutorial and runs whatever definitions are specified for our content.

// set the variable of the cookie we're calling
	var comments = $.cookie('comments');
// if cookie is collapsed, then do stuff. Otherwise, cookie expanded is used
	if (comments == 'collapsed') {
		$("#recent-comments-3 h2").css("background-position", "0 -34px");
		$("#recent-comments-3 ul").hide();

There are so many other ways that this functionality can be used, not just for toggling or hiding content. Feel free to download the example files above or check out the demo and view the source to get a better understanding of how the whole thing works.

Author: Jason

Hi, I'm Jason. A front end developer from Grand Rapids, Michigan, and founder of VagrantRadio. I enjoy working with Css, jQuery, Php, learning new techniques in Photoshop and you should follow me on Twitter or Snipplr.

Mojo Themes
Scroll to top