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 HTML markup consists of following elements:
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 WriteCookie JavaScript function gets triggered which accepts name as parameter.
Inside the JavaScript function, a JavaScript object is defined. Then, the value from the INPUT TextBox is read and assigned to the Value property while the received parameter is assigned to the Name property and the Expiry property is set to 30 days from the current date time.
Finally, the Cookie is saved into the Browser using document.cookie function.
 

ReadCookie

When Read Cookie button is clicked, the ReadCookie JavaScript function gets triggered which accepts name as parameter.
Inside the JavaScript function, a JavaScript object is defined. The cookie is read from the cookies collection using document.cookie function.
Then, the cookies are split using semicolon (;) and a FOR LOOP is executed over the cookies collection.
Inside the FOR LOOP, cookie object is fetched and name parameter is matched with the name of the cookie. If matched the cookie Name along with the Value are set in the properties of cookie object.
Finally, the Cookie value is display in JavaScript Alert Message Box.
 

DeleteCookie

When Remove Cookie button is clicked, the DeleteCookie JavaScript function gets triggered which accepts name as parameter.
Inside the JavaScript function, the Expiry Date of the cookie is set to a past date and the Cookie is updated back into the Browser using the document.cookie function.
Name:
<input type="text" id="txtName"/>
<br />
<br />
<input id="btnWrite" type="button" value="Write Cookie" onclick="WriteCookie('Name')" />
<input id="btnRead" type="button" value="Read Cookie" onclick="ReadCookie('Name')" />
<input id="btnDelete" type="button" value="Remove Cookie" onclick="DeleteCookie('Name')" />
<script type="text/javascript">
    function WriteCookie(name) {
        //Define a Cookie object.
        var cookieObj = {};
 
        //Set the Cookie Name.
        cookieObj.Name = name;
 
        //Set the Cookie Value.
        cookieObj.Value = document.getElementById("txtName").value;
 
        //Set Cookie Expiry.
        var dt = new Date();
        dt.setDate(dt.getDate() + 30);
        cookieObj.Expires = dt.toUTCString();
 
        //Save the Cookie in Browser.
        document.cookie = cookieObj.Name + "=" + cookieObj.Value + ";=expires=" + dt.toUTCString() + ";path=/";
    };
 
    function ReadCookie(name) {
        //Define a Cookie object.
        var cookieObj = {};
 
        //Reading the Cookie collection.
        var cookies = document.cookie.split(';');
 
        //Looping through the Cookie collection.
        for (var i = 0; i < cookies.length; i++) {
 
            //Fetch the Cookie object.
            var cookie = cookies[i];
 
            //Match the name of the Cookie.
            if (cookie.split('=')[0].trim().toLowerCase() == name.toLowerCase()) {
 
                //Set the Cookie Name.
                cookieObj.Name = cookie.split('=')[0].trim();
 
                //Set the Cookie Value.
                cookieObj.Value = cookie.split('=')[1].trim();
            }
        }
        //Return Cookie value.
        alert(cookieObj.Value);
    };
 
    function DeleteCookie(name) {
        //Set Cookie Expiry to Past date.
        var dt = new Date();
        dt.setDate(dt.getDate() - 1);
        document.cookie = name + "=;expires=" + dt.toUTCString() + ";path=/";
    };
</script>
 
 

Screenshot

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

Demo

View Demo
 
 

Downloads

Download Code