HTML | DOM cookie Property

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

Geting 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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 -->
    <script>
        function getCookies() {
            document.getElementById("cookies").innerHTML = 
                                        document.cookie;
        }
    </script>
</body>
</html>                    

chevron_right


Output:

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

Syntax:

document.cookie = NewCookie

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
      
    <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>
</body>
</html>                    

chevron_right


Output:
Before Setting a Cookie:

After Setting the Cookie:

Supported Browser: The browsers supported by DOM cookie Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.