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 = "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:
Contact Us