Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM cookie Property

  • Last Updated : 22 Jun, 2021

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.
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

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

html




<!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>                   

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: 
 

html




<!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>                   

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

 

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :