JavaScript Cookies Example

Hello guys, welcome to our series in JavaScript. We will continue the same topic from the last segment. Now let's look at another program, this program is to set more than one cookie. And secondly, if the cookie is already set, and you can see that when I click get cookie I see the name and value in an improper way. If we have to properly show through the name-value pair,

How can we do it?

In order to do it, we have to distinguish between name-value pairs.

First, let us copy-paste our existing program. Now in the get cookie, once it is set, as in the company name and LearnVern is set, then we simply alert it. Instead of alerting, what we do is… we take a variable that will be named array. We will take a variable and give it a name ,

(typing)

 array equal to document dot cookie dot split

(01/21)

 If you remember the array segment whenever our array has content and we have to split it with a particular sign, we use this. You can see, how our cookies are set... In the line cookie company name equal to learnvern, equal to sign will always remain constant. So in the cookie, the 'equals' will always be constant. So if we want to split the cookie, we can see that the prefix to equal displays the name and the suffix of equal displays the value of the cookie.

If I add equal to in split, it indicates that while splitting the first part is the name and the second part is the value. So now we can write something like this in the alert.

(pause 5 seconds ;typing) cookie name…

since we have stored an array here ,

And the 0th(zero) position of the array will define the name of the cookie. ..

Plus.. after slash N (4 seconds pause ;typing) value…(6 seconds pause ; typing) the first position of the array.

So we have split into two positions,

The first portion will be at the 0th(zero) position of the array and the second portion will be at the first position of the array. at the zeroth position, its name. and at the first position it’s value…

 And So now if we save it, make sure you save it in PHP format.

(pause 3 seconds ; typing)

cookie underscore value

We will name it cookie value as of now. Now let’s go into the program, guys remember you have to check everything on the local host.

When I go back and reload, we can see the second program cookie value.

So if I run the program without setting the cookie, and if I click get cookie button, I get the cookie name… company name..value.. LearnVern.

Now you will think that I have not clicked the set cookie button and how can we see it by default because we have saved a cookie with the same name.

If I saved this cookie already I will have to delete it.

We have a separate segment for deletion in which, we will learn how to delete cookie.

But as of now the cookie is already set.

By which name?

Company name and my value is LearnVern.

cookie is set by this name.

(04/16)

We can see here that we can also differentiate it.

Now let us look at another program, related to cookies. This program is like that.

When we load the program for the first time,

we can see a few colour options like yellow, green and red.

 Whichever colour is selected it will appear on the background of our window immediately.

It means the browser will be the colour I select here.

But if I close the program, and start this program next time, then next time, the previously selected colour should appear. It means if I select yellow and close the screen, or close the tab, and run the program again, the background should again be yellow.

okay…so now,

If green was selected last time, and I reload the program, I should only get green.

On the contrary if I do this without using cookie, the colour will change when reloaded.

It will not remain the same. I

n order to receive the same colour every time it is opened, for that…we use cookie.

To do this, we will generate a program,

let me remove a few portions of this program, and empty the script.

I will save it in H T DOCS in PHP format.

We will save cookie-related programs in PHP.

Let’s name it a change… color… cookie...

What do we need now?

We need a drop-down.

So we will take HTML drop down…

(typing) select..

Inside select, if you remember, are the options…

(typing) option..

I need a total of three colours.

I will enter the option three times.

From my selection to get my currently selected colour I’ll type ID.

Let's say.. I name it colour.

If we change any of this, meaning if I change my selection from the drop-down, it should detect which color is currently selected.

For this, I will use the onchange event.

 Let’s say, I’m accessing the get colour method on onchange.

In options..(2 seconds,typing), cyan..(2 seconds, typing), light green..(2 seconds, typing), sky blue..(2 seconds, typing).

(07/10)

We are choosing these three colours as of now.

Let’s say if I save this program. Our traditional method to get this,

So ,In the local host,

In the JavaScript folder..

we can see the changed color cookie.

Here we have cyan as the default.

Since I don’t want any default color, I will add an option of …select… color to which we will not add any value.

This is not an important value… so we will write (6 seconds pause ; typing) value.. cyan… value… light green… value… sky-blue.

So here, you can see my drop-down and the three values.

Now, what we have to do is, the function that we have made of get colour, on the basis of that,

Now we set a cookie on get colour function.

To do this,

 function.., get color...

(08/37)

So to get color, what will we write ?

We first need a value, what is the value of drop down ?

we can choose any variable,

we can take variable temp or anything.

I will choose a variable value which is equal to document.. dot.. get element by id.

What is my element?

(4 seconds pause ; typing)

Color id.., dot value.

What is the value of the drop-down?

We will take a variable, it can be anything I will take this as my variable. So the value of the drop-down will be stored in the variable.

Now, what are the values here?

We have colors in three places.

And one value in which there is no colour.

It means if this value is selected then we don’t have to do anything.

So in that case, ‘if the value is not equal to’, which value? This one.

( 3 seconds pause ; typing)

It means if there is no select color value, we move on and if it exists we don’t have to do anything.

So if there is no select color, then,

document dot… B G colour, means what ?

B G color stands for background color.

We will mention the value and if the value does not include select color, which means this one, then the color selected will be passed on to the background color.

We will also store it, which is most important.

document dot.. cookie equal to color equal to.. value..

If I write value here then it will take it as a value string, to do this we write plus… value.

So this indicates that, here in the program of cookie, the way we have passed the values statically, in the company name, how to pass them dynamically.

For that , Here we have the cookie name…, currently, it is color..and if I write value after plus.. it will be considered as a string. And will be joint to the color.

So the cookie-generated will be, color as in the name, and the value will be the value of the cookie.

clear up till now…okay !

So now, every time the window is loaded, so for it window.. dot.. onload equal to… function..(pause 3 seconds ; typing) which is the property of window object, it means whenever my window is loaded, if I close this program and reopen it, I want the previous color to be set. To achieve this,

 if document.. dot.. cookie.. dot… length.. dot is not equal to zero, it means my cookie has values. In that case what we do is, similar to the previous program,

var.. array..equal to..we will do the same, that we have done previously…document dot cookie dot split with equal to after that document dot…get element by ID, which ID , that is color dot value(3 seconds pause ; typing) equal to… array one

here in this line, we have stored the value of the drop-down in the value.

But, if I want to reload it, the value of array one is set in the drop-down value,

because I want the background to be selected here. I have loaded this program for the first time, this is why the background color is white.

If I select any color and close it, and then reload it,

I will need the previous color.

If my background has a colour it should also be selected in the drop-down. So for that, we will write this line. Once we write this line,

document..dot… B G Color equal to…. array’s value that is one.

 It means after we split, we don't need the zero position of the array. We used the one position of the array.

If I save and reload this program, there will be a few problems that we will look at.

Let's say cyan, my background color is cyan.

Light green, it’s light green, sky-blue, it’s sky-blue.

Let's say I select light green, if I copy this… close it, and open this program again, in a new tab,

(13/53)

As you can see we did not get the desired output.

Why did this happen?

The cookie is already set here.

How?

Before running this program, we ran two other programs in which cookie..the company name is equal to LearnVern and here the second program, in that too, company name is equal to learnvern..later colour equal to value is set.

Here, is the program we looked at, what is the context?

That is our program there is only one cookie that is set.

But actually, that is not true. My current server and domain have more than one cookie set. And the value of all of them is here. How to check this?

Let's say before the function runs, I take the get cookie button.

( 3 seconds pause )

 or we can do this,...(typing) if I press get cookie, as you can see, there are two cases generated.

One is the company name, LearnVern…second is color, light green.

If I split it and add it to my array, then I will get two cookies, so my company name stay will be on zero position, LearnVern on the first position, color on the second position, and light green on the third position of the array.

So here I have to consider zero one two three, I have to ideally write three here so that it works properly.

So first of all, I will remove window onload in get colour…

We will add it outside and change this to three.( 4 seconds pause ;typing)

 We will save and reload all programs…(4 seconds pause) Folder and then change colour.

As you can see, we have light green color as soon as I reloaded the program, the light green color has been set.

And I can see the drop-down menu with all the colors.

My program is successfully running.

The colour I previously selected when the background was white is stored in my cookie, and it says Cyan when I select light green and load it I get light green.

If I reload this program and see as you can see the colour is light green.

This indicates when I reload the value of the cookie, in this case, the color, changes. The value of the cookie is set in the background.

As you can see whenever I reload the program..every time…i am reloading…every time, the previously selected colour will appear. and based on that colour, we get output..

So this was about changing the colour with the help of a cookie. We have learnt a total of three programs today, to set the cookie, differentiate name and value, and use cookies like fetching previously saved data.

So this was the segment on cookies, it was quite long because we have to install a server to check cookies.

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.

Next segment will also be about cookies, cookie attributes. Thank you. (all changes have made)