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:
Similar Reads
How to set and unset cookies using jQuery?
An HTTP cookie is a small piece of data sent from a server and stored on client-side by the browser itself, Cookies are made to keep track of user and also to provide one nice browsing experience. We can also set our own cookies in the browser according to our need. Cookies can be set in the browser
2 min read
How to send a PUT/DELETE request in jQuery ?
To send PUT/DELETE requests in jQuery, use the .ajax() method, specifying the type as PUT or DELETE. This enables updating or deleting server resources via AJAX. Unlike .get() and .post(), jQuery lacks dedicated .put() and .delete() methods.ApproachTo make a PUT or DELETE requests in jQuery we can u
2 min read
How to create and read value from cookie ?
The web servers host the website. The client-server makes a request for data from the webserver and the webserver fetches the required pages and responds to the client by sending the requested pages. The web server communicates with the client-server using HTTP (HyperText Transfer Protocol). HTTP is
4 min read
How jQuery stores data related to an element ?
jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Aj
3 min read
How to Manage Sessions and Cookies in Express JS?
Express is a small framework that sits on top of NodeJS web server functionality to simplify its APIs and add helpful new features. It makes it easier to organize your application’s functionality with middleware and routing. It adds helpful utilities to NodeJS HTTP objects, it helps the rendering of
4 min read
How to use input readonly attribute in jQuery ?
Use jQuery methods to add the readonly attribute to the form input field. jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of the first selected element.If this method is used to se
3 min read
How to make Delete icon using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Delete icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="stylesheet" hre
1 min read
How to execute jQuery Code ?
jQuery is an open-source feature-rich Javascript library that is designed for the simplification of HTML DOM Tree traversal & manipulation, event-handling & CSS animation. It is quite popular for its features like light-weight, fast, small, etc, that make it easier to use. The purpose of usi
4 min read
How to write a browser-specific code using jQuery ?
In this article, we will see how to write browser-specific code using jQuery. To write the browser-specific code, we will use the Navigator userAgent property and jQuery indexof() method. The Navigator userAgent property is used to get the user-agent header’s value sent to the server by the browser.
2 min read
How to get all selected checkboxes in an array using jQuery ?
In this article, we are going to discuss various methods to get all the selected checkboxes in an array using jQuery. Several ways of doing this in jQuery are explained in detail with their practical implementation using code examples. Table of Content Using the array.push() method with each() metho
4 min read