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.
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 1 and above
- Edge 12 and above
- Internet Explorer 4 and above
- Firefox 1 and above
- Opera 3 and above
- Safari 1 and above
Please Login to comment...