JavaScript - Cookie Property

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user. When a user visits a web page, his name can be stored in a cookie. Next time the user visits the page, the cookie "remembers" his name. Cookies are saved in name-value pairs.

JavaScript can create, read, and delete cookies with the document.cookie property.

Here are a few examples of setting a cookie:

document.cookie = "username=John Doe";
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Reading a cookie
var x = document.cookie;

Deleting a cookie
// Just set the expires parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it. If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie.

Here we will set a attribute of message in the cookie and set it's value. We will also set an expiration date of 7 days from now.

TIP: EditThisCookie Chrome Extension is a useful tool.

function LookForMsgCookie()
{
    // to store results
    var html = "";

    // look for a specific cookie name
    var cookieName = "message=";

    // Look at any existing cookie and split it's values into an array
    var attributeArray = document.cookie.split(';');

    for (var i = 0; i < attributeArray.length; i++)
    {
        // cookie array item
        var item=attributeArray[i];

        // I assume the entry starts with a leading space?
        while (item.charAt(0)==' ' )
        {
            // get everything after the second position
            item=item.substring(1);
        }

        // if 'message' is found - does not have index of -1
        if (item.indexOf(cookieName)==0)
        {
            html=item.substring(cookieName.length, item.length);
        }
    }
    document.getElementById("demo1").innerHTML=html;
}

function SetCookie()
{
    var expDate=new Date();
    var expDays=7;

    // create the expiration date 7 days from now
    expDate.setTime(expDate.getTime() + (expDays * 24 * 60 * 60 * 1000));
    // set the cookie
    document.cookie="message=" + "Hello World;expires=" + expDate;
}