How to read write and delete cookies in jQuery?
Last Updated :
06 Aug, 2024
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=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
</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=
"https://code.jquery.com/jquery-2.1.3.js">
</script>
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
</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: