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 will be used to carry out the various functions of reading, writing and removing (deleting) Cookies.
The jQuery Cookie Plugin
This article makes use of the jQuery Cookie Plugin. This article covers basics of reading, writing and removing (deleting) Cookies. For more advanced usage, please refer jQuery Cookie Plugin Documentation.
jQuery Cookies: Read, Write (Save) and Remove (Delete) Cookies
The following HTML Markup consists of an HTML TextBox and three HTML Buttons for Writing, Reading and Deleting cookies respectively.
Inside the jQuery document ready event handler, each button has been assigned with jQuery Click event handler.
Writing Cookies
When the Write Cookie Button is clicked, the respective jQuery event handler is executed which saves the value of the Name TextBox 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.
Reading Cookies
When the Read Cookie Button is clicked, the respective jQuery event handler is executed which fetches the value of the Cookie 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.
Removing Cookies
When the Remove Cookie Button is clicked, the respective jQuery event handler is executed which removes the Cookie 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://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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
