In this article I will explain with an example, how to read, write (save) and remove (delete) values stored in Browser Cookies using JavaScript.
 
 

HTML Markup

The following HTML markup consists of:
TextBox – For capturing value to save in cookies.
Buttons – For writing, reading and removing cookies.
The Buttons for writing, reading and removing cookies have been assigned with the WriteCookie, ReadCookie and DeleteCookie JavaScript onclick functions respectively.

WriteCookie

When Write Cookie button is clicked, the value of the INPUT TextBox as Value along with the Key (Name) of the Cookie is saved into Browser Cookie using document.cookie function.
 

ReadCookie

When Read Cookie button is clicked, the Value of the Cookie is fetched using document.cookie function by splitting Key and Value with ‘=’ character.
 

DeleteCookie

When Remove Cookie button is clicked, the Value of the Cookie will be removed.
Name:
<input type="text" id="txtName" />
<br />
<br />
<input id="btnWrite" type="button" value="Write Cookie" onclick="WriteCookie()" />
<input id="btnRead" type="button" value="Read Cookie" onclick="ReadCookie()" />
<input id="btnDelete" type="button" value="Remove Cookie" onclick="DeleteCookie()" />
<script type="text/javascript">
    function WriteCookie() {
        document.cookie = "Name=" + document.getElementById("txtName").value;
    };
 
    function ReadCookie() {
        alert( document.cookie.split('=')[1]);
    };
 
    function DeleteCookie() {
        document.cookie = "Name=";
    };
</script>
 
 

Screenshot

Read, Write (Save) and Remove (Delete) Cookies in JavaScript example
 
 

Demo

View Demo
 
 

Downloads

Download Code