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.
Note: For more advanced usage of jQuery Cookie Plugin, please refer jQuery Cookie Plugin Documentation.
 
 

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