JQuery Cookies | Creating, Modifying and Expiring | Set and Unset Cookies

    Before going to learn on How to set/unset cookie with jQuery, we will see a small introduction on Cookies in Web world.
    
  A Cookie is a small piece of Information which is sent from a server of a website and is stored in web browser. whenever user browses the same website again server will identify his previous activity or information based on the Cooke stored on browser for that website and process the required details. Cookies can also be called as HTTP cookie, web cookie, or Internet cookie. Cookies can be used for Session management, Personalization, Tracking etc...

To create the cookies using JQuery, we have different plugins available. But now I am going to explain creating a Cookie with jQuery using plug-in jquery.cookie with jquery cookies example.

jquery.cookie is a simple, lightweight jQuery plugin for reading, writing and deleting cookies.
To get started, First you need to download it From Jquery cookies plugin download and add it after your jQuery library include as shown below.

Creating Cookies using JQuery

First thing we required to create a cookie is just add Name and Value of the cookie and store the cookie. Below Code shows simple way to create a cookie

$.cookie('name', 'value') 

In some scenarios we want to create a cookie for certain number of days and expire it automatically, in this case while creating cookie itself we can add one more attribute to tell when the cookie will expire. Example to expire a JQuery Cookie  shown below

$.cookie('name', 'value', { expires: 2 });

In above case cookie will be created and will Expire in 2 days.

In addition, we may want to create a cookie which is valid for the entire site. To make a cookie valid across entire site we need to add the Path attribute as shown below.

$.cookie('name', 'value', { expires: 2, path: '/' });

If we don't use path: '/' , then the cookie will be created with the Path of the page that created it.

Reading Cookies using JQuery

Now we will see how to read a cookie in different ways using jquery.cookie

To read a cookie simply use the cookie name which we created earlier as shown below

$.cookie('name'); //It will return the value of the cookie

If you read a cookie which is not created, then it will give undefined as the output

$.cookie('javaScriptFoo'); //It will return 'undefined' 

To read all the cookies we created, use simply cookie() without any name argument like below

$.cookie(); //It will return all the cookies available with { "name": "value" } pairs

Deleting Cookies using JQuery

Deleting a cookie is very simple. Just call the removeCookie() method with the cookie name as the argument, then the particular cookie will be deleted.

$.removeCookie('name'); // returns true as we created cookie with 'name' earlier.
$.removeCookie('JSfoo'); // returns false as we don't have any cookie with name 'JSfoo'

As per the note from jquery.cookie when deleting a cookie, you must pass the exact same path, domain and secure options that were used to set the cookie, unless you're relying on the default options that is. So make sure you remove the cookie the way you created . for example, If you created a cookie with Path as argument, then you need to delete it using path only as shown below

$.removeCookie('name',{ path: '/' });

Below are all the options available with JQuery cookie

expires : n           //expires in n days 
    path    : '/'        //The value of the path attribute of the cookie 
    domain  : 'abc.com'  //The value of the domain attribute of the cookie
    secure  : true        //If set to true the secure attribute of the cookie
                          //will be set and the cookie transmission will
                          //require a secure protocol (defaults to false).

Please share in comments, If you have any comments or need clarifications.