In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > properties > cookie (document)

cookie property (document)

Browser support:

Sets or retrieves the cookies stored for the current document.

Each cookie is a (name, value) pair stored by the browser. The cookie property retrieves the stored cookies as a string that contains a semicolon-separated list of name=value pairs. Modifying the value of the cookie property does not affect all stored cookies; only a single cookie can be defined, modified or removed with it. See Example 1 for details.

With the cookieEnabled property, you can check whether cookies are enabled in the browser. Note that the commonly used browsers support at most 50 name/value pairs and a maximum of 4096 characters for the cookies, but these limits can be lower in older browsers.

Syntax:

object.cookie;

You can find the related objects in the Supported by objects section below.

This property is read/write.

Possible values:

String that retrieves a semicolon-separated list of name=value pairs or specifies one name=value pair together with any of the following items:

expires=date

Specify the date in GMT (Greenwich Mean Time, see the Date.toGMTString method) format. If no expiration date is specified, this cookie expires when the browser closes. If the specified expiration date is in the past, the cookie identified by the name is deleted.

domain=domain

If not specified, the domain that belongs to the location of the current document will be used. Only pages in this domain can access the cookie.

path=path

If not specified, the path of the current document will be used. Only pages under this location can access the cookie.

secure

Indicates that the browser should use an SSL connection for sending the cookie to the server.

Default: this property has no default value.

The value of a cookie cannot contain commas, semicolons or whitespaces, use the encodeURIComponent global method for setting and the decodeURIComponent global method for getting the value of a cookie. See Example 2 for details. Note that only the names and the values of cookies can be retrieved with the cookie property, the extended information (expiration time, domain, path, secure flag) cannot.

Example HTML code 1:

This example show how to create, modify and remove cookies:

<head>
    <script type="text/javascript">
        function TestCookies () {
            if (!window.navigator.cookieEnabled) {
                alert ("Please enable cookies in your browser first!");
                return;
            }
            
            var info = document.getElementById ("info");

                // create a cookie with no expiration time
            document.cookie = "fruit=peach"; 

                // dump the current cookies
            info.innerHTML += document.cookie + "<br />";

                // create a cookie with expiration time
            document.cookie = "price=23; expires=Mon, 23 Jul 2040 22:00:00 GMT"; 

                // dump the current cookies
            info.innerHTML += document.cookie + "<br />";

                // modify the value of a cookie
            document.cookie = "fruit=apricot"; 

                // dump the current cookies
            info.innerHTML += document.cookie + "<br />";

                // delete a cookie (expiration date in the past)
            document.cookie = "fruit=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 

                // dump the current cookies
            info.innerHTML += document.cookie + "<br />";
        }
    </script>
</head>
<body onload="TestCookies ();">
    <div id="info" style="background-color:#e0c0a0;"></div> 
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example implements some useful methods to help the work with cookies:

<head>
    <style>
        button {
            background:#d0ac88;
            border:1px solid #CCCCCC;
        }
    </style>
    <script type="text/javascript">
        function SetCookie (cookieName, cookieValue, expires) {
                // replace the commas, semicolons and whitespaces in the value
            var repairedValue = encodeURIComponent (cookieValue);

            if (expires) {
                    // create or modify the required cookie with expiration time
                document.cookie = cookieName + "=" + repairedValue + "; expires=" + expires;
            }
            else {
                    // create or modify the required cookie
                document.cookie = cookieName + "=" + repairedValue;
            }
        }

        function GetCookies () {
            var name_valuePairs = [];
            
            var cookiesArr = document.cookie.split("; ");
            for (var i = 0; i < cookiesArr.length; i++) {
                var name_valueStr = cookiesArr[i];
                var name_valeArr = name_valueStr.split("=");
                name_valuePairs[name_valeArr[0]] = decodeURIComponent (name_valeArr[1]);
            }

            return (name_valuePairs);
        }

        function GetAllCookies () {
            alert (document.cookie);
        }

        function GetCookie (cookieName) {
            var cookies = GetCookies ();
            alert (cookies[cookieName]);
        }

        function RemoveCookie (cookieName) {
            document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
        }

        function RemoveAllCookies () {
            var cookies = GetCookies ();
            for (var i in cookies) {
                RemoveCookie (i);
            }
        }

        function TestCookies () {
            if (!window.navigator.cookieEnabled) {
                alert ("Please enable cookies in your browser first!");
            }
        }
    </script>
</head>
<body onload="TestCookies ();" onunload="RemoveAllCookies ();">

    <button onclick="SetCookie ('fruit', 'peach');">Set cookie 'fruit' to 'peach'</button>
    <button onclick="SetCookie ('fruit', 'apricot');">Change cookie 'fruit' to 'apricot'</button>
    <br  /><br  />
    <button onclick="SetCookie ('price', '23', 'Mon, 23 Jul 2040 22:00:00 GMT');">
        Set cookie 'price' to '23' with expiration date
    </button>

    <br /><br />
    <button onclick="GetCookie ('fruit');">Get cookie 'fruit'</button>
    <button onclick="GetAllCookies ();">Get all cookies</button>
    <br /><br />
    <button onclick="RemoveCookie ('fruit');">Remove cookie 'fruit'</button>
    <button onclick="RemoveAllCookies ();">Remove all cookies</button>
</body>