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:
<!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.
<!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: