Updated April 10, 2023
Introduction to jQuery read cookie
The jQuery read cookie is used to returns all the available cookies in one string with the document.cookie property. The jQuery document.cookie property is a built-in property in jQuery, which can also use to create and delete the cookie. The cookie is a small text file stored with small pieces of information like username and password stored at the client-side. The cookie is used to identify each computer in the network or internet. Cookie needs to read in the case where website required to remember user, user logins, carts for shopping, and all so that the website can give the personal and convenient visits to the user.
The syntax of the jQuery read cookie –
var cook = document.cookie;Parameters –
The document.cookie does not accept a parameter because it is a property.
Return value –
The return value of this property is a single string of all the available cookies. The return string contains name-value pairs that are separated by a semicolon(;) and the name value is separated by equal(=).
Working of jQuery read cookie
The jQuery read cookie read all the cookies with the document.cookie property. Suppose we have a login form element in the HTML page that contains some form input elements. Now we need to read the cookie every time to identify the users for the next visits to provide the convenience on the website, so we can read the cookie and identify the user or customer as use the enabled selector as “var cook = document.cookie;” which read all the cookies available at the client-side.
Examples for the jQuery read cookie
Here are the follwoing examples mention below
Example #1
Example of jQuery read cookie where we create a new cookie and read the cookie –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery read cookie </title>
<script>
function createCookie()
{
cookievalue = "user1";
document.cookie = "name =" + cookievalue;
$( "#p1" ).text("Setting Cookies : " + "name=" + cookievalue );
}
function readCookie()
{
if(document.cookie.length != 0)
{
var cook = document.cookie.split( "=" );
$( "#p2" ).text("Name = " +cook[0]+" " +"Value = " +cook[1]);
}
else
{
$( "#p2" ).text("Cookie is not available");
}
}
</script>
</head>
<body>
<h3> This is an example for jQuery read cookies : </h3>
<button onclick = "createCookie()" > Click here to create the cookies </button>
<button onclick = "readCookie()" > Click here to read all the cookies </button>
<p id = "p1" style = "color : red"> </p>
<p id = "p2" style = "color : red"> </p>
</body>
</html>An output of the above code is –
Once we click on the first button, the output is –
Once we click on the second button, the output is –
In the above code, there are two buttons one for creating the cookie and another for reading the cookie. When we click to create the cookie, the new cookie is created with a name for that cookie and a value for that name cookie. Next, when we click to read the cookie it read the cookie which is just created by the “create the cookie” button as “var cook = document.cookie.split( “=” );”, so it read the cookie and split cookie name and value by using the equal symbol(=), as we can see in the above output.
Example #2
Example of jQuery read cookie where we create a new cookie with expired date and time, and read the same cookie for the name and expired date and time –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery read cookie </title>
<script>
function createCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 2 );
cookievalue = escape(document.myform.name.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
alert("The Cookies created with : " + "name=" + cookievalue );
}
function readCookie()
{
if(document.cookie.length != 0)
{
var cook = document.cookie.split( "=" );
alert( "Name = " +cook[0]+" " +"Value = " +cook[1]);
alert( "Name = " +cook[2]+" " +"Value = " +cook[3]);
}
else
{
alert("Cookie is not available");
}
}
</script>
</head>
<body>
<h3> This is an example for jQuery read cookies : </h3>
<form name = "myform" action = " ">
Enter name: <input type = "text" name = "name"/>
<br>
<input type = "button" value = "Create Cookie" onclick = "createCookie()"/>
<input type = "button" value = "Read Cookie" onclick = "readCookie()"/>
<p id = "p1" style = "color : red"> </p>
</form>
</body>
</html>An output of the above code is –
In the above code, there is a form that contains one input element to accept the name of the user and there are two buttons one for creating the cookie and another for reading the cookie. When we click to create the cookie, the new cookie is created with a name for that cookie, and the value for that name cookie is the name of the user entered and also includes the expired date and time for the cookie. Next, when we click to read the cookie it read the cookie which is just created by the “create the cookie” button as “var cook = document.cookie.split( “=” );”, so it read the cookie and split cookie name and value by using the equal symbol(=) and also display the expired date and time of the cookie, as we can see in the above output.
Conclusion
The jQuery read cookie can be performed by using the document.cookie property, which is a built-in property in jQuery. The cookie read is required to provide personal and convenient visits to the users.
Recommended Articles
This is a guide to jQuery read cookie. Here we discuss the Working of jQuery read cookie along with the examples and outputs. You may also have a look at the following articles to learn more –
