Cookies are useful for a number of reasons. Their classic use is to store form information such as usernames, emails, etc. You can set cookies using jQuery just as easy as you can with PHP or any other language.

Working with Cookies and jQuery

jQuery allows you to set cookies using any one of their methods. Let’s use the .click() method to set a cookie. Working example: Click on the cookie image below to set a cookie:

Set a Cookie using jQuery

The jQuery Cookie Plugin

If you’re going to be working with jQuery to set cookies then you’re going to want to use the jQuery Cookie Plugin. This plugin is easy to work with and very lightweight.

Set the Cookie

We’re going to use the jQuery .click() method to set a cookie when the user clicks a button. Here’s the code I used for the demo cookie:

Let’s get a bit more fancy. Suppose you have a footer popup panel, similar to the one I just did on cheapsally.com that holds an advertisement. Most likely you’re going to want to set a cookie so it doesn’t bombard the user when they click it and continue browsing your website.

What’s going on here is first checking to whether the cookie exists on the user’s computer. If it does then the panel will remain hidden. If not, it slides up. When a user clicks the close button in the panel it sets the cookie. Demo coming soon!

How to Delete the Cookies

To delete the cookie simply pass a null value to it. Please remember you must use the same path and domain used when the cookie was set.

How to Alert the Cookie Values

Using an alert to display your cookie value’s is a helpful way to debug your code:

Use PHP functions for Cookie Values

With PHP you can set a number of values and make cookies even more userful. Check out this example using some of WordPress’ functions:

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow Devin:

14 Responses to “How to Set Cookies with jQuery”

  1. Ddadfd

    How to Set Cookies using jQuery Tutorial and Demo | Word Impressed http://bit.ly/iaafVU

    http://www.anyshoppingdeals.com

    Reply
  2. Ddadfd

    How to Set Cookies using jQuery Tutorial and Demo | Word Impressed http://bit.ly/iaafVU

    http://www.anyshoppingdeals.com

    Reply
  3. Martin Molina Alvarez

    doesnt work for me :S

    Reply
  4. Martin Molina Alvarez

    doesnt work for me :S

    Reply
  5. Dugar Virendra

    This plugin is now moved to a different location.

    http://jquerybyexample.blogspot.com/2012/06/jquery-cookies-get-set-and-delete.html  

    Reply
  6. Dugar Virendra

    This plugin is now moved to a different location.

    http://jquerybyexample.blogspot.com/2012/06/jquery-cookies-get-set-and-delete.html 

    Reply
  7. Alessandro

    is there a demo with an example for this please? Sorry but I am new to jQuery, I am looking for a pop-up window where you can click to accept a cookie. Thank you

    Reply
  8. Edward Liu

    Hi, on click only work with ids? I tried it with classes and it didn’t work.

    Reply
  9. Casper

    Hi Devin Walker, The last snippet of code, with some PHP for WordPress. Should I set this in my jQuery document or inside my PHP file of WordPress? Thanks in advance

    Reply
    • Devin Walker

      This would be inside a PHP file because JS can’t execute PHP.

      Reply
      • Casper

        Thank you for your fast answer. Another question, I am busy with creating a notification bar in WordPress that will show a message bar on the top of the website when there is a new post published. What I now did is getting the $expiry_date variable that will contain: strtotime(‘+1 minute’, $post_date); Here I set the expire time, that I past also in the cookie parameter “expires”. What I want now is, when an user is clicking on a close button, the bar will be hide, until the time is expires. Came up with the following:

        var notifyBar = $(‘#notification-bar’);

        notifyBar.find(“.notification-close”).click(function() {

        notifyBar.css( “display”, “none” );

        //$.cookie(‘demo_cookie’, ”);

        $.cookie(‘notify-keep-closed’, ”, { expires: ”, path: ‘/’ });

        });

        Only the problem is, that when I refresh the page, the bar will be displayed again. Do you know I can save this to the cookie or something, so it will only display the bar when the time is expired? Thank you so much, look out for your answer.

        Reply
        • Casper

          Sorry for above post, but I saw you have that code written above. But when I refresh the page, the bar will be displayed again and will not be hidden until the time is expired. Do you know what this can be? Thanks in advance.

          $(function() {

          if($.cookie(‘devrijheid’) == null) {

          $(“#notification-bar”).slideDown();

          };

          $(“.notification-close”).click(function() {

          $(“#notification-bar”).slideUp();

          $.cookie(‘devrijheid’, ”, { expires: ”, path: ‘/’, domain: ‘devrijheid.nl’ });

          });

          });

          Reply
  10. suneet

    Hi there, I am trying to display records based on the value picked up with a button. The problem which I am facing is – on clicking one of the rows of html table i am picking up the value and store it in a cookie. And on the basis of this cookie displays other details in the second table. My format of the page is something like this :

    [ Table – 1 ]

    Button -> “View Selected Record”

    [ Table – 2 ]

    So the problem is : When I clicked on a row of a table-1, value is picked and store in a php variable ‘$ono’. Please see the code below :

    1.

    But, here on clicking the button nothing happens but when I refresh the page, value is shown in the second table. Why?

    I am unsetting the the cookie here. Please see the code below :
    1.

    Reply

Leave a Reply