JavaScript Cookie Attributes

JavaScript cookie attributes

Hello guys, welcome to our series in JavaScript. The last segment was about cookies, how to add them, how to get and set them, and how we need a local host or server to use cookies. that we have seen in the last segment. We also covered three programs related to cookies.

Let’s move on to today’s topic which is also related to cookies, today’s section is about cookie attributes. In the last segment, we learned how to set a cookie. But there are different attributes related to cookies.

Like expiring cookies, defining maximum age, defining the path of where cookies should be set, defining the particular domain in which we create cookies.

We will look at all these today. These are all the important attributes mentioned here.

Like expires…, which shows a specific date or time that on this date and time my cookie will expire.

Max age, defines how long the cookie will remain active and will be removed right after.

Both of them are almost the same, in the first one we give the information but in the second one, we do this differently...

Next, path

‘’It expands the scope of the cookies to all the pages of the website”..

for which paths should the cookie be effective.

For example, if I only want to set cookies in specific pages of the LearnVern website,

I will provide a path, which will define where it will be active. And in so and so path, it shouldn't be active.

(02/34)

We use the path attribute for this.

Then comes the domain attribute which defines the domain in which the cookie will be valid.

We will look at these attributes one by one.

Firstly, expires attribute.

The meaning is simple, we are adding an expiry date. means from when, my cookie should expire. or it should be no longer available.

 Let’s say the program in sublime text, with the simplest cookie, let’s open it.

This is the one in which, we set and get the cookie.

We set the cookie as the company name is equal to LearnVern.

Now let’s say if I want to give it an expiry, mentioning that the cookie will not perform after so and so date.

I will write a new program for this…

I will save it..where do I save it ? I will save it in htdocs as a PHP file.

(typing)

cookie underscore expire

Here after the semicolon, I can add an attribute to it.

Let’s say my attribute is expires, you can say, at the end “S “ comes. So, after writing expire,

Let’s say I want this to expire in one week. Okay ! so ! What is today’s date ?

Today is the 19^th of June, 2021 and I want it to expire on the 26^th of June. So, what will I write ?

(typing) .. Saturday …20 june..comma.. you can take any time, let’s say, I am taking this…U T C

here in expires, what can we see ? My cookie expires on Saturday 20^th June 2021 and the time.

If I set the cookie now it will expire on so and so date.

So, if I run this program, what is the method ?

first of all, I need to start xampp,

I am starting xampp and Apache server and then, we will open Chrome. ( 3 seconds pause ; typing)

Localhost… JavaScript, where is our directory, if I start cookie expires, press get cookie you can see that I can see the cookies I set in the last program. But this cookie will be expired soon, when? On the date in the program.

clear ! Okay !

Let’s say, I want this cookie to expire today, we already have a program named cookie, I will open the cookie from the directory.

After clicking on the set cookie button, when I press to get a cookie, the color is light green, the company name is LearnVern.

Now, let me go to the cookie expire and change the date to today, the 19^th. In June, we won’t write E. Only three alphabets will be used for months like Jan, Feb, Mar, etc..

I'll change this to zero zero UTC. Okay !

 Let's save it and Now, I will go back, in my cookie expires programme. If I do get cookies then, I am getting the company name…learnvern..etc etc okay !

(06/28)

 Now what I do is, if I click on the set cookie button and get it, you can see that the company name cookie is removed. It has been deleted !

why It has been removed because I have given the set cookie function, assigned the expiry date to cookie as today. When I am recording this, and I have passed the time in UTC. I have intentionally added the time which has already passed.

Based on this, when I clicked on set cookie, my expires cookie attribute was executed.

And because of that my cookie is expired.

We can also use this to delete the current cookie.

clear up till now..okay !

Let's say I want to remove the color attribute, by using expire I can perform it.

we will move ahead in the slide.

Moving further, the Max age attribute.

Max age attribute means we provide calculations, it’s definitely clear, the calculation.

If we read it from right to left, 365 is the number of days.., 24 is the number of hours.., 60 minutes…, and 60 seconds...

This defines the age of the cookie while setting it. we will plus here, the time which we have passed here.

okay..so now !

(07/59)

Let’s say if I want the cookie to be active only for one minute or 60 seconds, I will only write 60 seconds.

Let’s say if it is for half an hour then we can write 60 into, because that is half hour, so 60 into 30, we can like something like this. so that and our 60 into 30 can be calculated.

Let's say The program of cookie expires, like that,

( 4 seconds pause ;typing)

 and this is our max-age.

In this program, I will add maximum.. age. Maximum age is equal to, now I want to perform calculation so that I cannot write in the string so, I will write it by adding plus and within brackets.

okay what that indicates,

The semicolon indicates that it ends here.

So if I want my company name, which is to learn vern to display only for 30 seconds, So, I am passing 30 seconds, if I save this program,(pause 3 seconds ; typing) let’s say…PHP..and here, cookie, and max age..

 And press get cookie, LearnVern is removed.

Back and reload, my cookie max-age has come, we will do get, there is not a cookie named LearnVern, okay !

 set cookie and now, get cookie, LearnVern cookie is generated.

The time duration is only 30 seconds, so we will check if it exists in 30 seconds.

30 seconds have been completed,

As you can see, the company name’s cookie has been removed after 30 seconds.

We checked if the cookie is being removed quickly.

clear guys ! okay .

( 4 seconds pause )

What is the format ? ( 3 seconds pause ; typing)

Format..to..set..max..age..

So the format can be something like this, seconds multiplied by minutes multiplied by hours multiplied by days.

This is our format for setting max-age. These are our steps.

If I write 60 into 60 and it's set in a cookie. so it has been defined as a 60 minutes into 60 seconds, the cookie will be set according to time given, This will be the age of the cookie. I will save this programme.

now, we will move ahead, In..cookies’ path attribute…

path attribute is used for what actually ?

The path attribute is used when we set a cookie, we want it to be set in a particular path. If there is a program outside of it, the cookie should not be set.

Here we have a directory, directory means folder structure. In that we can say that, The programs are in a folder called JavaScript. So, here, ..(typing)..If I write Javascript, all my programs are in the javascript.

If I want to set a cookie in all programs, in the javascript.

If I want all the cookies set in the programs that is in the javascript, that means values should be accessible in the programs in that particular path.

In all these programs, I can use path. If I don't want the cookie to be accessible outside JavaScript, and If I want , by making a subdirectory it should not be accessible, then we can do it by using path.

I will do one thing, you can see that some programs have already been in my folder structure.

(12/45)

I will create a new folder in javascript, called a cookie.

(pause 3 seconds ;typing)

There it is.

You can see my folder here.

Now I will generate a program similar to the program called a cookie.

let’s say…

I have pasted the same program here in the cookie. It is a cookie folder and in the folder, it is a program with the same name; cookie.

Now, what will I do ?

In the program inside the folder, I will set a new cookie, and name cookie one equal to… hello.

In this, I will add a path attribute..path attribute like this.

This indicates that my cookie will only be accessible to the path in the directory and also in the sub folder,but my cookie will not accessible outside this folder. I will save and reload the program.

Look at this carefully, I will run the program inside the folder. When I click get cookie, it says cookie 1 hello. It means this is already set.

That's why it shows cookie 1 hello.

 If I go back and open the program outside the folder, cookie 1 with the hello value will not be visible.

But if I go back to my folder and run the cookie program, and do get cookie, I can see it again, cookie 1 hello. What It indicates is that, the cookie that is set under the name cookie 1 hello, where it is accessible.

It is only accessible to inside this cookie folder only, and outside this folder this cookie is not accessible. This was our program.

When we make any cookie and add path attributes inside that, so my cookie, in that particular path, as many programs or as many cookies are there, it shows there. we can access them,

We cannot access it outside the folder. You can use the path to restrict cookies. we can consider it as an advantage. When we work with cookies, our cookie in which folder or in which environment , it should be accessible. If we want to define that, we want to define a scope for cookies, then this way, with the help of path attribute, we can do this.

guys ! clear up till now..

(15/49)

Now we have the domain attribute.

What domain attributes do ?

We cannot perform this practically right now because this works on a localhost or a website.

So let’s look at it theoretically, that is how, it will be performed !

When we work on a domain that we have done with path attribute, Let’s say we assign a path to a cookie, it is very similar to assigning a path to cookies in which it will be accessible.

“A javascript domain attribute specifies the domain for which the cookie is valid”

Let’s say, we have this website, (3 seconds pause, cursor)

learnvern dot com.

I want the cookie to only and only be accessible to this website, learnvern, let’s say, I open a new website in a new tab , google or instagram, anything, I want that in that domain, cookie should not be available. It doesn’t show there, and I want it to be accessible on the learnvern website.

In that case, what can we do?

In that case, we can add one more attribute, that is domain. like this..( 5 seconds pause; typing) , what is the domain ? …learnvern dot com.

 If the domain is created in this way, the cookie will be created and will be useful. If the domain is not Learnvern then this cookie will not work. Let’s say I create another web page called…(typing)let’s say training ..in the learnvern domain, where there is a training, my cookie will be generated there..with the same domain as LearnVern, the cookie will be accessible to this website.

Like this, we can control where to create cookies, where they will be accessible, and when by using the domain.

If we are working locally then we will be using the path and if not working locally, we will be using a website domain. As of now, I will comment this..

Coming back to the slide, we have covered four cookie-related attributes , that are expires… max-age…path..and domain. These are very important cookies related attributes, when we work on cookies in javascript then, with these attributes we can give them life span, we can decide validity and accessibility.

Since cookies store a lot of data, even locally and it is useful in connections between client and server, it is mandatory that use of cookies should be very securely, because in the cookie, data like username and password are also there, if it would be releveled and then it is wrong, it is unethical. That's why, it is necessary that it should be in the proper direction. When you create cookies make sure you add their expiry , you work on locally and on server, make sure to give them validity to control scope and accessibility. We can do this with the attributes.

We will conclude the attributes section here.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

(correct script)