JavaScript offers a variety of additional properties that can improve the performance of cookies. Below are several attributes along with their explanations.
| Attributes | Description |
|---|---|
| expires | It maintains the state of a cookie up to the specified date and time. |
| max-age | It maintains the state of a cookie up to the specified time. Here, time is given in seconds. |
path |
It expands the scope of the cookie to all the pages of a website. |
| domain | It is used to specify the domain for which the cookie is valid. |
Cookie expires attribute
The expiration attribute is utilized to establish a persistent cookie by specifying a date and time that signifies the duration of the cookie's validity. Upon reaching the specified date and time, the cookie is automatically removed.
Let's see an example of cookie expires attribute.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin;expires=Sun, 20 Aug 2030 12:00:00 UTC";
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Cookie max-age attribute
The max-age attribute of a cookie offers an alternative method to establish a persistent cookie. In this case, the duration is specified in seconds, determining the cookie's validity for only the specified duration.
Let's see an example of cookie max-age attribute.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin;max-age=" + (60 * 60 * 24 * 365) + ";"
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Cookie path attribute
By default, when a cookie is generated for a webpage, its validity is limited to the current directory and any sub-directories. To broaden the reach of a cookie across all pages of a website, JavaScript offers the option to set a path attribute.
Cookie path attribute Example
To grasp the concept of the path attribute, let's illustrate it with an example.
In this scenario, when a cookie is set for webpage2.html, it remains accessible exclusively to webpage2.html and its sub-directory webpage3.html. It does not extend its validity to webpage1.html.
In this instance, we are leveraging the path attribute to extend the accessibility of cookies across all pages. To achieve this, simply adhere to the directory structure provided above and insert the following code into each of the three web pages. As a result, the cookie will be accessible and valid on every web page.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin;max-age=" + (60 * 60 * 24 * 365) + ";path=/;"
}
function getCookie()
{
if(document.cookie.length!=0)
{
var array=document.cookie.split("=");
alert("Name="+array[0]+" "+"Value="+array[1]);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
Cookie domain attribute
The domain attribute in JavaScript indicates the specific domain where the cookie is considered valid. For example, when setting a domain name for this attribute, it could be:
domain=logic-practice.com
In this case, the cookie remains valid for the specified domain as well as any of its subdomains.
If we assign a sub-domain to the attribute, for example:
domain=training.example.com
In this case, the cookie remains valid exclusively for the specified sub-domain. Therefore, it is advisable to specify the domain name instead of the sub-domain for a more effective approach.