HTML DOM cookie Property

Last Updated : 10 Aug, 2026

Almost every website stores cookies (small text files) on the user's computer for recognition and to keep track of his preferences. DOM cookie property sets or gets all the key/value pairs of cookies associated with the current document.

Getting all the Cookies: The document.cookie method returns a string containing semicolon-separated list of all the cookies(key=value pairs) of the current document.

Syntax 

document.cookie

Example: Below is the program to get all of the cookies associated with the current document: 

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Cookie</title>
    <style>
        h1 {
            color: green
        }
    </style>
</head>

<body onload="getCookies()">
    <h1>GeeksforGeeks!</h1>
    <h3>Here are the cookies baked by this document:</h3>
    <!-- Paragraph element to display all cookies -->
    <p id="cookies"></p>
    <!-- Fetch cookies and display them in the
        above paragraph element -->
<!--Driver Code Ends-->

    <script>
        function getCookies() {
            document.getElementById("cookies").innerHTML =
                document.cookie;
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

A new cookie can be written for the current document by providing a string containing key=value pair separated by a colon with other cookies(key=value pairs) or any of the following optional values: 

  • expires=date: where the date is in GMT format. By default, the cookie expires when the browser is closed.
  • path=path: specifies the directory to store cookies the on computer. By default, the path is set to the path of the current document location.
  • max-age=seconds.
  • domain=domainname: specifies the domain name of the cookie. If not specified, defaults to the domain name of the current page.
  • secure=boolean: specifies if the cookie has to be sent through https server.

Syntax

document.cookie = NewCookie

Example: In this example, we are setting a cookie.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>Cookie</title>
    <style>
        h1 {
            color: green
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks!</h1>
    <!-- Name for Cookie -->
    <input type="text" id="key" placeholder="Name">
    <!-- Value for the cookie -->
    <input type="text" id="val" placeholder="Value">
    <br>
    <!-- button to set cookie -->
    <button onclick="setCookie()">Set a cookie</button>
    <br>
    <!-- Button to get cookie -->
    <button onclick="getCookie()">Get cookies</button>
    <!-- Empty Paragraph element to display Cookies -->
    <p id="cookies"></p>
<!--Driver Code Ends-->

    <script>
        // Set cookies
        function setCookie() {
            document.cookie =
                document.getElementById('key').value + "="
                + document.getElementById('val').value;
        }
        // Get cookies
        function getCookie() {
            document.getElementById("cookies").innerHTML =
                document.cookie;
        }
    </script>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->
Comment

Explore