jQuery Cookie Explained

by Bhumi // Nov 29,2012 // No comment

jQuery provides a plugin which you can use with the jQuery library itself and you can easily store and access cookies.

Before we begin, lets say a few words about the jQuery Cookie plugin which is basically useful to store useful information.Today we will learn how to use jQuery Cookie to store some user information in a Cookie to display an specific content to the user.

SYNTAX:


$.cookie("name", "value","expires", "path","domain" ,"secure" );

1 2	$.cookie("name", "value","expires", "path","domain" ,"secure" );

About Parameters:

Name The “expires” option defines unique cookie name.

Value It defines the value of the cookie name you defined in first option

Expires The “expires” option defines active lifetime of the cookie. If omitted, the cookie is a session cookie.

path It defines the path where cookie is to be used . If you want to make it available for the entire page use default path: ‘/’.

Domain Domain Name is the cookie was created.You can use specific domain name or subdomain name.

Secure By Default its a false. If true, the cookie transmission requires a secure protocol (https).

Let’s understand by creating one application(demo) using jquery Cookie plugin.Here, I am going to explain how you can set cookie and increment/decrement values of cookie using jquery plugin.

First of include the jQuery library and after including the jQuery library, we will include the jquery.cookie.js plugin in HTML < head > tag. After that, include your JavaScript file or just place your code into a < script > tag.


// jquery library include
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

// jquery library include

Next,we place jQuery script code which is used jQuery Cookie plugin and jQuery core elements.


$(document).ready(function(){       
    var Cookie = $.cookie( 'demoCookie' );
	// To get cookie value
        if(Cookie==null || Cookie=='')
        {
            $.cookie('demoCookie',0); 
           // To set cookie value to zero
        }  
     $('.button-prev').click(function() 
        {
                var Cookie = $.cookie( 'demoCookie' );
                Cookie=parseInt(Cookie)-1;
		// decrement cookie value to 1.
                $.cookie('demoCookie',Cookie);
        });
     $('.button-next').click(function() {
                var Cookie = $.cookie( 'demoCookie' );
                Cookie=parseInt(Cookie)+1;
		// increment cookie to 1
                $.cookie('demoCookie',Cookie);
        });
    $('.button-delete').click(function() {               
                $.cookie('demoCookie','');
		//empty cookie to revert back cookie value to null
        });
    $('.jq-text').text(Cookie).show(); 
      // To display cookie.
})

$(document).ready(function(){

var Cookie = $.cookie( 'demoCookie' );

// To get cookie value

if(Cookie==null || Cookie=='')

{

$.cookie('demoCookie',0);

// To set cookie value to zero

}

$('.button-prev').click(function()

{

var Cookie = $.cookie( 'demoCookie' );

Cookie=parseInt(Cookie)-1;

// decrement cookie value to 1.

$.cookie('demoCookie',Cookie);

});

$('.button-next').click(function() {

var Cookie = $.cookie( 'demoCookie' );

Cookie=parseInt(Cookie)+1;

// increment cookie to 1

$.cookie('demoCookie',Cookie);

});

$('.button-delete').click(function() {

$.cookie('demoCookie','');

//empty cookie to revert back cookie value to null

});

$('.jq-text').text(Cookie).show();

// To display cookie.

})

Now, place your HTML code into < body > tag which is basically a divs used to display cookie information stored into the cookies.


<div class="jq-text"></div>
<div class="button-prev"><a href="">Prev</a></div>
<div class="button-next"><a href="">Next</a></div>
<br/>
<div class="button-delete"><a href="">Delete Cookie</a></div>

<br/>

<div class="button-delete"><a href="">Delete Cookie</a></div>

Following these simple steps, you can easily implement jQuery Cookie code.Lets put this code together and see the demo how it works!!

DEMO

View Demo

Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

jQuery Shake Effect Explained

Recently someone asked me that, I want that vibrate effect which you can see in some site as advertisement. In some site, advertisement comes with READ MORE

Solution:Uncaught ReferenceError $ is not defined in WordPress

As you all know, new version of WordPress (3.5) includes its own version of jquery, which has been rigorously tested with WP and many of READ MORE

To read JSON data with jQuery

In this short and informative post, I am going to explain how to parse the JSON string using jQuery. JSON stands for a JavaScript Object READ MORE

JQuery Animation Explained

jQuery is a JavaScript framework which intends to easily develope interactive web sites and user interfaces with a few lines of code.jQuery animate is quite READ MORE