Related Articles

Related Articles

HTML | DOM cookie Property
  • Last Updated : 24 Jul, 2019

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
Recommended Articles
Page :