How to read write and delete cookies in jQuery ?
In this article, we will learn how to read, write and delete cookies in jQuery. This can be done using the cookie() and removeCookie() methods of the jquery-cookie library. We will first understand what exactly is a cookie.
Cookie: Cookies are small blocks of data created by a web server when a user is using a website and cookies are stored on the user’s device. These cookies remember certain information about the user.
1. Creating or writing a cookie: We use the cookie() method to create cookies.
Syntax:
$.cookie('name', 'value', { settings });
Parameters: This method has two parameters.
- name: This is the key of the cookie
- value: This is the value of the cookie.
- settings: This is an object that can be used to set additional parameters to the Cookie.
2. Reading a cookie: We can use the cookie() method to read a cookie by passing the name of the cookie and it will return the value of the cookie.
Syntax:
$.cookie('name');
Parameters: It has a single parameter, which is the name of the cookie to be read.
Return Value: It returns the value of the cookie.
3. Removing a cookie: We can use the removeCookie() method to read a cookie by passing the name of the cookie. It Returns true when a cookie was successfully deleted, otherwise, it returns false.
Syntax:
$.removeCookie('name');
Parameters: It has a single parameter, which is the name of the cookie.
Return Value: It Returns true when a cookie was successfully deleted, otherwise, it returns false.
The below example demonstrates all of the above methods.
Example:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
< link rel = "stylesheet" href =
< script src =
</ script >
< script type = "text/javascript" src =
</ script >
</ head >
< body >
< form class = "form-inline mt-4" >
< input type = "text" class = "form-control mx-2"
id = "cookieData"
placeholder = "Enter something for cookie" >
< button id = "write" type = "button"
class = "btn btn-secondary mx-2" >
Write / Add cookie
</ button >
< button id = "read" type = "button"
class = "btn btn-secondary mx-2" >
Read /Show cookie
</ button >
< button id = "delete" type = "button"
class = "btn btn-secondary mx-2" >
Remove cookie
</ button >
</ form >
< script type = "text/javascript" >
$(function () {
$("#write").click(function () {
$.cookie("data", $("#cookieData").val());
});
$("#read").click(function () {
alert($.cookie("data"));
});
$("#delete").click(function () {
$.removeCookie("data")
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: Creating a cookie with expiry time in days. The approach is similar to the above example, We just need to pass an additional expiry value while creating the cookie.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< script src =
</ script >
< link rel = "stylesheet" href =
< script type = "text/javascript" src =
</ script >
</ head >
< style >
button {
display: block !important;
margin: 10px;
}
</ style >
< body >
< form class = "form-inline mt-4" >
< input type = "text" class = "form-control mx-2"
id = "cookieData" placeholder = "Enter Data" >
< input type = "text" class = "form-control mx-2"
id = "cookieExpiry" placeholder = "Enter Expiry" >
</ form >
< button id = "write" type = "button"
class = "btn btn-primary mx-2" >
Write / Add cookie
</ button >
< button id = "read" type = "button"
class = "btn btn-primary mx-2" >
Read /Show cookie
</ button >
< button id = "delete" type = "button"
class = "btn btn-primary mx-2" >
Remove cookie
</ button >
< script type = "text/javascript" >
$(function () {
$("#write").click(function () {
// Write the cookie and set its expiry value
$.cookie("expiry", $("#cookieExpiry").val(),
{ expires: $.cookie("expiry") });
$.cookie("data", $("#cookieData").val());
});
$("#read").click(function () {
alert($.cookie("data") +
"\n expires in days = " +
$.cookie("expiry"));
});
$("#delete").click(function () {
$.removeCookie("data")
$.removeCookie("expiry")
});
});
</ script >
</ body >
</ html >
|
Output:
Last Updated :
11 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...