.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> JQuery >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create, Read, Delete Cookies values using JQuery

Posted By:JQuery Developer       Posted Date: May 20, 2013    Points: 200    Category: JQuery    URL: http://www.dotnetspark.com  

In this tutorial we will learn how to Create cookies, Read values and delete cookies using JQuery with less code using Jquery.Cookie plugin
 

If you would like to Create , Read, or delete cookie from JQuery in a very simple and using very less code than you should consider this plugin to manipulate cookies using JQuery. We will see all cookies operation in this article.

to begin with you have to download this plugin from github and the link is

https://github.com/carhartl/jquery-cookie


Once you download add the reference of JQuery and Jquery.Cookie plugin to your web page

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="Jquery.Cookies.js"> </script>

now we will see the code one by one to create, read and delete cookies.

Create Cookie

Simple creation

// Create cookie with some value
$.cookie("name", "Some Value");


Cookie with value and expiration day

// If you want cookie to expire after 1 day you can simply write the number
$.cookie("name", "Some Value", { expires: 1 });


Create with specific expiration date and time

// Incase if you want cookie to expire after a certain period of time than you can assign the Date() object of javascript
// In below method cookie will expire after 2 minutes and 50 seconds
var myDate = new Date();
myDate.setHours(myDate.getHours(), myDate.getMinutes() + 2, myDate.getSeconds() + 50);
$.cookie("name", "EPG", { expires: myDate });

 

Read Value from cookies


//To read value from cookies simply call by name

alert($.cookie("name"); //Here I am reading in alert message box

 

Remove or Delete cookies

//To remove cookies from computer just simply call removeCookie() and pass the name of the cookie
$.removeCookie('name');


Full code with HTML and JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Page Title</title>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="Jquery.Cookies.js"> </script>

    <script type="text/javascript">

        $(document).ready(function () {
            
            // If you want cookie to expire after 1 day you can simply write the number
            $.cookie("name", "Some Value", { expires: 1 });

            // Incase if you want cookie to expire after a certain period of time than you can assign the Date() object of javascript
            // In below method cookie will expire after 2 minutes and 50 seconds
            var myDate = new Date();
            myDate.setHours(myDate.getHours(), myDate.getMinutes() + 2, myDate.getSeconds() + 50);
            $.cookie("name", "Some Value", { expires: myDate });


            //Remove cookie
            $.removeCookie('name');

        });
        

    </script>
</head>
<body>    
    <input type="text" name="number" value=" " />
</body>
</html>
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend