Handle Cookies using JQuery

Mon Jan 07, 2013 11:29 pm

Cookies creation and remove using JQuery

Create Cookie :
javascript code

$.cookie("CookieName", "Value");

Cookie creation with expiry after 1 day:
javascript code

$.cookie("CookieName", "Value", { expires: 1 });

Adding path to the opitions:
javascript code

$.cookie("CookieName", "Value", { expires: 1,path    : '/' });

Adding domain name:
javascript code

$.cookie("CookieName", "Value", { expires: 1,path    : '/',domain  : 'codemiles.com' });

Secure the cookie :

javascript code

$.cookie("CookieName", "Value", { expires: 1,path    : '/',domain  : 'codemiles.com',secure  : true });

To print the content of cookie :
javascript code

alert($.cookie("CookieName"));

To delete the cookie :
javascript code

$.cookie("CookieName", null);

or by :
javascript code

$.removeCookie("test");

Example of using Cookie with JQuery
javascript code

<html>
<head>
<title>Create Cookie- Remove Cookie JQuery</title>

<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script src="jquery.cookie.js"></script>
<style type="text/css">
body
{
background:#5477BE;
font-size:22px;
}
 
</style>
 
<script>
 $(document).ready(function(){
  $("input#sbtButton").click(function(){
       
       $.cookie("firstCookie", "Yam");
	  
        $('div#div1').append("Cookie Created, expires after one day<br/>");
	   $('div#div1').append("Cookie value="+$.cookie("firstCookie")+"<br/>");
	    $.cookie("firstCookie", null);
	   $('div#div1').append("Cookie has been deleted..."+"<br/>");
	   
    });
  });
</script>
</script>
</head>
<body>
 

<b>Press on the next button to print and create Cookie :</b><br/>
 
<input type="button" value="Add Cookie" id="sbtButton" />
 
 
<div id="div1"></div>
</body>
</html>

Please note that you have to download the JS files that support the Cookies functions :

Code:: https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js http://archive.plugins.jquery.com/project/Cookie