In this article I will explain with an example, how to use Browser
Cookies in
jQuery i.e. reading values stored in Cookies, writing (saving) values in Cookies and also how to remove (delete) Cookies using
jQuery.
The jQuery Cookie Plugin
This article makes use of the
jQuery Cookie Plugin. This article covers basics of reading, writing and removing (deleting) Cookies.
HTML Markup
The HTML Markup consists of following elements:
TextBox – For capturing value to save in cookies.
Buttons – For writing, reading and removing cookies.
Inside the HTML Markup, the following script file is inherited.
1. jquery.min.js
2. jquery.cookie.min.js
Inside the
jQuery document ready event handler, the Buttons for writing, reading and removing cookies have been assigned with
WriteCookie,
ReadCookie and
DeleteCookie jQuery click event handler respectively.
Write Cookie
When the Write Cookie Button is clicked, the TextBox value is saved to browser Cookie using the $.cookie function.
The $.cookie function accepts two parameters, first the Name (Key) of the Cookie and second the Value to be stored in the Cookie.
Read Cookie
When the Read Cookie Button is clicked, the value of the Cookie is fetched using the $.cookie function.
In order to read the Cookie value, the $.cookie function is used with one parameter i.e. the Name (Key) of the Cookie.
The value read from the Cookie is displayed using
JavaScript Alert Message Box.
Remove Cookie
When the Remove Cookie Button is clicked, the Cookie is removed using the $.removeCookie function.
The $.removeCookie function accepts the Name (Key) of the Cookie in order to remove the Cookie.
Name:<input type="text" id="txtName" />
<br /><br />
<input id=" btnWrite" type="button" value="Write Cookie" />
<input id=" btnRead" type="button" value="Read Cookie" />
<<input id=" btnDelete" type="button" value="Remove Cookie" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnWrite").click(function () {
$.cookie("Name", $("#txtName").val());
});
$("#btnRead").click(function () {
alert($.cookie("Name"));
});
$("#btnDelete").click(function () {
$.removeCookie("Name")
});
});
</script>
Screenshot
![jQuery Cookies: Read, Write (Save) and Remove (Delete) Cookies in jQuery example]()
Demo
Downloads
