Cookies in JavaScript

by Osman Mrzljak on Oktober 15, 2005

This is a tutorial about how to use cookies in JavaScript. Common JavaScript functions are available for you to use freely in your own code.

HTTP cookies can be easy manipulated in JavaScript using the document.cookie property.

How to store/set Cookies

To set a cookie all we need to do is assign a value to the document.cookie property.

document.cookie = "name=value";

Retrieving/Get Cookies

To read cookies we simply need to read the value of document.cookie .

alert(document.cookie);

Common JavaScript Cookie Functions

Above we saw very simple manipulation of cookies. In the case we want use cookies for storing values in it, we have to deal also with specific cookie name, expiry dates, et cetera. To do this we can better use some of utility cookie functions.

  /**
 * Author : Osman Mrzljak
 * www.osmanmrzljak.com
 */
/**
 * Sets a Cookie with the given name and value.
 *
 * name       Name of the cookie
 * value      Value of the cookie
 * [expires]  Expiration date of the cookie. 
 *			  Default value is "end of current session"
 * [path]     Path where the cookie is valid for. 
 *			  Default value is "path of calling document"
 * [domain]   Domain where the cookie is valid. 
 * 			  Default value is "domain of calling document"
 * [secure]   Boolean value indicating if the cookie 
 *			  transmission requires a secure transmission
 */
function setCookie(name, value, expires, path, domain, secure)
{
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}

/**
 * Gets the value of the specified cookie.
 *
 * name  Name of the desired cookie.
 *
 * Returns a string value of specified cookie,
 *   or null if cookie can not be found.
 */
function getCookie(name)
{
    var docck = document.cookie;
    var prefix = name + "=";
    var begin = docck.indexOf("; " + prefix);
    if (begin == -1)
    {
        begin = docck.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1)
    {
        end = docck.length;
    }
    return unescape(docck.substring(begin + prefix.length, end));
}

/**
 * Deletes the specified cookie.
 *
 * name      name of the cookie
 * [path]    path of the cookie. 
 *           Note: it must be same as path used to create cookie
 * [domain]  domain of the cookie. 
 *           Note: itmust be same as domain used to create cookie)
 */
function deleteCookie(name, path, domain)
{
    if (getCookie(name))
    {
        document.cookie = name + "=" + 
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            "; expires=Thu, 01-Jan-70 00:00:01 GMT";
    }
}

Put these JavaScript functions into a common java script file: common_cookies.js . You can also download it from here and use it whenever you need it. Put something like the following in the head section of your HTML page:

<script type="text/javascript" src="common_cookies.js"></script>

JavaScript Cookie Demo

<a href="#" onclick='setCookie("author", "Osman Mrzlak");return false'>Set Cookie!</a>

You can try it out now:

Set Cookie!

Now how to read:

<a href="#" onclick='alert(getCookie("author"));return false'>Get Cookie!</a>

Get Cookie!