HTML - DOM Document cookie Property

Quiz

HTML DOM document cookie property is used for creating, reading and deleting cookies. The cookies are used by website to keep track of user specific information .The cookies are in the key=value pairs format. Cookies are deleted as soon as the browser is closed but you can specify an expiry date for it.

Syntax

To set the cookie

document.cookie = newCookie;

To get the cookies

document.cookie;

Parameters

In the above syntax the newCookie is of type string and is a semicolon separated list of name-value pair. Listed below parameters are accepted by the cookie property.

Parameter	Description
expires=date	To specify the date in GMT format. By default the cookies are deleted as soon as the browser is closed.
path=path	To specify the directory path on the computer where the cookies are to be stored. Only absolute path to be used .
domain=domainname	To specify the domain of your website. Current document domain used if not specified.
Secure	To tell the browser to use https protocol for sending the cookie to the server.

Return value

This method has return type of string containing semi-colon separating list of all the cookies.

Examples of HTML DOM Document 'cookie' Property

The following examples illustrates how to get and set cookie.

Get Cookie of Document

Look at the following given example on how to get cookie.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM cookie Property</title>
</head>
<body>
   <h3>HTML DOM Document cookie Property</h3>
   <p>Click below button to get cookie</p>
   <button type="button" onclick="cookiess()">Get cookie</button>
   <p id="cookie"></p>
   <script>
      function cookiess(){
         var x=document.cookie;
         document.getElementById("cookie").innerHTML="cookie: "+x;
      }
   </script>
</body>
</html>

Set Cookie of Document

Look at the following given example on how to create and display cookie.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM cookie Property</title>
</head>
<body>
   <h3>HTML DOM Document cookie Property</h3>
   <p>Click below button to create a cookie</p>
   <button type="button" onclick="cookiess()">Create cookie</button>
   <p id="cookie"></p>
   <script>
      function cookiess(){
         var x=document.cookie;
         x="username=TutorialsPoint;class=Education;location=India;expires=Wed, 15 June 2024 11:04:00 UTC";
         document.getElementById("cookie").innerHTML="cookie: "+x;
      }
   </script>
</body>
</html>

Difference Between Cookies and Local Storage

Cookies	Local Storage
Cookies are for client-server application.	Local storages are for client application.
Does have expiery dates.	Does not have expiray dates unless client clear on his own.
Have size limit 4KB.	Have size limit 5KB.

Supported Browsers

Property
cookie	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3

html_dom.htm

Print Page