This tutorial should get you started with cookies in JavaScript. Some utility JavaScript functions are included for you to use freely in your own code.

JavaScript cookies are easily manipulated using the document.cookie property.

Setting Cookies

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

document.cookie = "name=value";

Retrieving Cookies

Reading cookies is equally as easy. Simple read the value of document.cookie.

alert(document.cookie);

JavaScript Cookie Functions

This all looks very simple, but what about getting cookies with a specific name, or setting expiry dates? To do this we need to use a bunch of utility cookie functions.

/**
 * 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: end of current session)
 * [path]     Path where the cookie is valid (default: path of calling document)
 * [domain]   Domain where the cookie is valid
 *              (default: 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 containing value of specified cookie,
 *   or null if cookie does not exist.
 */
function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    } else {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1) {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}

/**
 * Deletes the specified cookie.
 *
 * name      name of the cookie
 * [path]    path of the cookie (must be same as path used to create cookie)
 * [domain]  domain of the cookie (must 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";
    }
}

I've put these JavaScript functions into a convenient file: cookies.js for you to download. Then whenever you need to use them, simply put something like the following in the head section of your HTML page:

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

JavaScript Cookie Example

<input type="button" value="Set Cookie"
    onclick='setCookie("data", prompt("Enter some data:"))' />

That looked pretty easy didn't it? You can try it out now:

Now for reading the cookie:

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

Get Cookie!