JavaScript Deleting a Cookie

JavaScript deleting a cookie

Hello guys, welcome to our series in JavaScript. In the last segment, we learnt how to generate multiple name value pairs and how to store them in cookies . We also worked on two practicals related to it. I hope you have performed both of them on your own. Let us move forward in the same topic which is cookie, this is the last segment and it is called deleting a cookie.

okay so,

When we generate cookies in JavaScript, it is also very important to delete them.

Because once the cookie is stored, the whole point is to not store it for too long ,but store it for a short period and till the request and response is performed.

We will look at how we can delete a cookie, once it has been created and stored. we have seen the cookies attributes, in that We have already seen the two attributes in cookies, expire and delete.

We are going to see these both today as well.

These are the two main methods to delete a cookie. These are the ways to do it. First, with the help of the expire attribute. Second one is the max-age attribute. We have seen both these methods already, but today we will be looking at them again.

The last method is, deleting it through the browser, since we are using the cookie in the browser, there is also a way to delete it from the browser itself.

understood guys !

First of all the first way is the expire attribute, so, that we see.

Let's say , we want to generate a name cookie.

As we have generated the cookie called name so many times we will generate something else. so, instead of name, we will generate different cookies..

For that we need to perform this :

First of all I will open a sublime text. Here we will generate this related to cookie so here,

html… and example..(typing) deleting a cookie.

First of all,

We will save this program. Since we’re working with cookies we will go to C, …in that our xampp folder…in that htdocs..we have made a JavaScript folder, there we have been storing our cookie related programs. and here we name it as delete underscore 1 dot php.

our program has been generated.

Firstly, we need two input fields in the body which are buttons.

So, in input, in the type..we will take button

We don’t need a name, so value, in the value… and then set cookie and then the most important onclick event. (3 seconds pause; typing) we will generate our Set cookie method.

…same. set cookie will set cookie and get cookie for getting the cookies which have already existed. here, this button.here, comes get cookie. We will write a script, since we have two functions, set cookie and get cookie. Let’s create both the functions.

(typing)

function… setcookie

in set cookie we simply set cookie, so we type

document dot…cookie equal to …since it is the name value, we will write first name…equal to..

You can write anything for the first name, I will write abcd. The cookie is set. We will add the expire attribute later. First of all with the help of get cookie …how to get cookie, we will see that too..

for that,

if document dot cookie dot length is not equal to zero.

It means the cookie exists. And if it does, inside this, we will write alert …document..dot..cookie while if it doesn’t exist we will write alert …cookie is not set yet

Okay !

This was our program, it is a very simple program, to set and get the cookie.

Let’s save the program.

As we know that we need a local host to run the cookie, start, (3 seconds pause; cursor movement)once xampp has been start after that, open Chrome… localhost, JavaScript, this is our directory, where our programs have been stored, that is local host 8 triple zero..this is our port number and after that our folder’s name. and this is the recently generated program that is, delete underscore 1.

(05/41)

If I open it and press get cookie, we can see the previous cookie in object form, we can see as it is, as we have already generated it.

If I click okay and set cookie, and then get cookie,

then you can see that the first name is abcd is written here..

It means the cookie which was recently generated, has been set.

Now, we have a way to delete the cookie. we are going to see expires so, expires..equal to..we can give any date we want to give. and let's say , I Want from today to next Sunday. I want that on Sunday, this cookie should get deleted. For that I have to write sunday after comma a date for example today is 22^nd June, it is a Sunday on 27^th. So I will write about that date. 27 june. I will write J U N only. okay… It should expire on this date.

If you want you can also mention the time. U T C.. My cookie has expired on so and so date. The cookie is already generated.

If I want to delete the cookie right now, what can I Do? In expires, I can add today's date. Let’s say today’s date is 22..then I will change here to 22, if june, then we will keep that only, we will keep time as it is, I will save it, Now, in this program, first we will do get cookie, I have a set cookie, I am reloading it, and doing get cookie, set cookie and now again get cookie, so can you see that , I have given the same date and the time that is already passed. Hence, my cookie is deleted. If we want to delete the cookies which are already exist , which we have generated in privisious segment through object then,

We can do the same thing on an object cookie.

So, as you can see, We have deleted the cookie with the expire method. Let us come back to the slide.

we have seen expires attribute,

The next attribute is max-age.

Let’s say, for max- age too, I copy and paste the same program…It is the same program. ( 5 seconds pause; typing) I will save it.

As you can see there is an expired attribute. In place of that, I want to add max zero. We can assign a date here, as we have assigned in expires too. Assign some future age date, and that will it’s age. but we want to check the deletion, so if I type max age as zero the cookie gets deleted.

Let’s say I remove this portion, save the program (6 seconds pause ;typing) and reload it.

The program delete_2 has been generated. If I click get cookie, my object cookie exists, set cookie, then get cookie, there is a cookie with first name that says abcd.

okay ..

(09/31)

Now, let me add Max age is zero attribute again, what happens with that, the cookie will be deleted.

okay so,

we will Save it and reload it then, you can say that in the get cookie, the cookie exists.

When I click set cookie, this line, document dot cookie will be executed in the code .

This means the cookie will be set again with age equal to 0.

That means that the cookie does not have age.

understood ! clear.

Now, After getting the cookie, the cookie has been removed.

 This is our second method; max age, so, in both methods , In expires, we can give past date in current date or we can give past time, which has already been passed, we can delete the cookie by that and in the max age, by passing max age is equal to zero. we can do these things.. We have covered both attributes, Max age and expiration.

(pause 3 seconds)

I hope you have followed these two methods. Now, let’s see.

Now the third type is explicitly , how can we use it ?

how to delete a cookie from the browser after it is set? It depends on the browser.

it is different in every browser.

It’s different for Mozilla and chrome. All the browsers have different ways to do this.

Let’s say if I’m using Chrome, we have to google it,

because in different browsers there are different ways to delete cookies, we have opera...safari..microsoft edge..mozilla firefox..and many more, in mobile , there are numbers of browsers in mobile phones right !

so, we can not remember various methods of deleting cookies…

so, we can check the deleting method for various browsers. 

So, if I am using chrome, then we can search here,

“how ..to ..delete ..cookie..and now our browser, ..google chrome..”

(3 seconds pause)

And we will take a few steps to do it.

“on your computer, open chrome”

“At the top right..click more”

In my case, there is a customisation… icon, options icon have been given here,

“click more tools”

And “clear browsing data”

So If I follow this steps, and will click on more tools,

and click on “clear browsing data”

and this window will pop up..okay !

in this, you can see,

“cookie and other site data”

 It means all the cookies stored will be removed. If I only select cookies and untick browser history and cache Image and file , I can do it this way, from here…understood guys !

Now, here in advanced, here, it shows options for last one hour,

that shows the time period you want to remove cookies. for example, in the last one hour…in the last 24 hour…In last 7days..in last 4 week and ..for all time..

We can also do it based on the amount of time. There are other things mentioned here.

“cookie from other sites data’’

‘’cache images and files’’

So if you want to clear a cookie, you can uncheck the rest of the items.

 I am currently not going to do this since the browser has other cookies and data stored and those will also be removed so I will not be doing it.

There are many cookies in addition to that programme related cookie such as , email related data..any other browsing related stuff, it will also be removed from here, right..

As if now I will not perform this step.

clear guys !

(13/09)

Let's say, if I choose the last hour, so 17 sites’ data have been stored in cookies.

So i will go here and I remove max age …Save.. and reload..

( 3 seconds pause; cursor movement)

get cookie, set cookie..my abcd is set.

If I remove cookies from the last one hour, let’s see If the data is removed or not.

Let’s reload it and click get cookie, you can see that cookie is not set yet.

So all the cookies that I set in through the past hour have been removed.

This was another way, if I press the set cookie and in get cookie I will again get abcd , I will receive abcd again because I removed Max age zero from the program.

So, from here, if I will bring the max age again then, my cookie will be deleted again.

( 3 seconds pause ; cursor movement)

set cookie …get cookie..cookie deleted.

This was the method to delete cookies in chrome.

The same way you can check for respective browsers like firefox you will find steps for that. so for each browser, you have to set cookies and accordingly you have to follow steps.

if you don't want to check then, you can explore the options according to various browsers , you can check that way and can perform the method..

This was the method to delete cookies explicitly.

So we conclude cookies here.

We learnt how to store, how to generate, we understood the logic behind it, why cookies are generated, how to delete cookies. how to generate multiple cookies, how to handle it, all these things in our cookies segment.

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.

In the next segment, we will see how events work in javascript.

Thank you.

(edited script)