JavaScript – Cookie Attributes


What are the attributes for cookie in javascript ?

Javascript enables us some of the optional attributes for the cookie, they are

1. expires

2. max-age

3. path

4. domain

5. secure

will be explained in detail below,

1. expires

This maintains the state of a cookie up to the specified date and time.

2. max-age

This maintains the state of a cookie up to the specified time. Here, time is given in seconds.

3. path

This expands the scope of the cookie to all the pages of a web site.

4. domain


This is used to specify the domain for which the cookie is valid.

5.secure

This is used to create secure cookies which are transmitted securely.

Javascript interview questions basic !!!

Click to Learn More about – Javascript online learning

How to set a cookie with “expires” attribute ?

Cookies without an expiration date are known as session cookies.

These session cookies expire in the moment when the browser is closed, or they can be deleted via code before the browser is closed.

We must be keen in setting cookie, we have to remember the params we are using, if we want to delete the cookie we must use the same params.

So setting cookie params is important.

Example :

“expires” attribute provides one of the ways to create a persistent cookie.

Date and time are set, which defines the active period of a cookie.

Once the declared date and time is passed, that cookie is deleted automatically.

<script>
			document.cookie="username=Abdul Kalaam; expires=Sat,23 Oct 2020 8:20:10 UTC";
			document.cookie="username=Sachin Tendulkar; expires=Sun,12 Jan 2021 8:30:11 UTC";
			document.cookie="username=Rahul Dravid; expires=Mon,12 Feb 2025 9:31:15 UTC";
		</script>

How to set a cookie with “max-age” attribute ?

“max-age” attribute is another way to create a persistent cookie.

Time is declared in seconds for the cookie.

Moreover, that cookie will be valid only up to that declared time.

Example :

<script>
                        document.cookie="username=Abdul Kalaam; max-age=3153600";
                        document.cookie="username=Sachin Tendulkar; max-age="+(60*60*24*365)+";";
                        document.cookie="username=Rahul Dravid; max-age="+(60*60*24*100)+";";
                </script>

How to set a cookie with “path” attribute ?

We use “path” attribute, usually we use ‘/’ symbol.

Whenever we use ‘/’ symbol, the cookie is set for the directory where the user is currently in.

Example :

Suppose consider the cookie is set on the website with the path ‘/studentinfo’.

Then the cookie is only available for the users visiting the page ‘/studentinfo’ directory.

“https://www.example.com/studentinfo”

<script>
                        document.cookie="username=Abdul Kalaam; max-age=3153600;path=/;";
                        document.cookie="username=Sachin Tendulkar; max-age="+(60*60*24*365)+";path=/";
                        document.cookie="username=Rahul Dravid; max-age="+(60*60*24*100)+";path=/";
                </script>

How to set a cookie with “domain” attribute ?

Setting a “domain” attribute is good for the users.

Suppose a user visits a web site https://www.example.com

If we do not set the domain cookie, the browser will automatically set the cookie.

Most of our websites will stats with “www” which is actually the sub-domain of our actual top-level domain(example.com).

So when the user types “https://www.example.com” in the browser the cookie is set for the domain.

But the next time when the user types “https://www.example.com” the domain cookie is available and retrieved from the browser.

However, when the user types “https://example.com”, the cookie will not be available.


Solution :

The point is domain cookie should be available for both domains https://example.com and https://www.example.com

To avoid this problem, we have to set the domain cookie for the top-level domain starting with dot(.)

domain name should be set as “.example.com”.

This creates domain cookie for both domains https://example.com and https://www.example.com

<script>
                document.cookie="username=Abdul Kalaam; max-age=3153600;path=/;domain=.example.com";
                document.cookie="username=Sachin Tendulkar; max-age="+(60*60*24*365)+";path=/;domain=.example.com";
                document.cookie="username=Rahul Dravid; max-age="+(60*60*24*100)+";path=/;domain=.example.com";
        </script>

How to set a cookie with “secure” attribute ?

When we set the cookie with attribute “secure”, then the cookies are transmitted securely.

We have to set the “secure” argument to either 1 or true.

Example :

<script>
		document.cookie="username=Abdul Kalaam; max-age=3153600;path=/;domain=.example.com;secure=1";
		document.cookie="username=Sachin Tendulkar; max-age="+(60*60*24*365)+";path=/;domain=.example.com;secure=true";
		document.cookie="username=Rahul Dravid; max-age="+(60*60*24*100)+";path=/;domain=.example.com;secure=false";
        </script>