JavaScript Cookie with multiple Names

JavaScript cookie with multiple names

Hello guys, welcome to our series in JavaScript, in the last segment, we covered attributes in cookies like expire… Max age.. path..and domain.

All four were covered. And since the domain cannot be performed without a server, we didn't check the domain.

But we have checked all the other attributes till the path.

Today’s segment is also about cookies, that is multiple name value cookies. It means in all the programs we have seen till now, we stored data in a single cookie. For example, we have taken the company name equal to LearnVern,and stored it and got it, once we have taken a color named program. And stored that. Basically, what were we doing? We used to create one cookie and store data in it.

But when we are practically working, it is not necessary that every time we make a single cookie and store it. we need cookies with more than one value,we have to create more than one cookie to store information. Today we are going to learn if it is possible to create cookie with more than value, and if it is possible then, how to store them.

Let us go ahead with the segment. This shows that, can we store more than one value in a single cookie. Basically, it won't be possible. We cannot store more than one piece of information in one cookie. We need to create more cookies to store more data. For example, if I create a cookie called name and if I want to store both first name and last name, it will not be possible. I can save both of these in a string. But they cannot be stored independently in a single string.

In that case, what can we do ? we can create an object with the available inputs using the JSON (jason) dot stringify method.

What does it do ? It converts available inputs into objects.

So we can store more than one object in a cookie because objects can have multiple values. This is the first option.

Okay ! understood !

The second option is called each name-value pair. It means first name, first name, last name, last name, age and age value. In this way, we can store the information in different cookies. We can either store it in an object, If not in the same cookie or we can create multiple cookies.

The first program will generate three input fields, we will add the details of these fields in the cookie.

Okay !

(03/21)

Let’s open sublime text. Here, we will stick…. with HTML but will save it in PHP.

For example (6 seconds pause ; typing) multiple cookies…, script, and then we will type javascript and create three input fields.

let’s say, I save this program,

In drive C…, in xampp…, in htdocs…, in javascript…, in that folder.

PHP (5 seconds pause ; typing) , I will generate a program with multiple cookies.

Let's say, initially I wanted three input fields.

Here, Name…, input, type equal to text, and then I don’t need a name I need id so I will take id…name.

The first one is the name, the second one is email and the third one for Learnvern is the company name. ( 3seconds pause; typing)

Okay?

We have a name, email...., and company name.

We have all the three fields and we want to save their value inside a cookie.

when these should be stored ?

Now we want to store their value in a cookie. As usual, we will create get cookie and set cookie.

(typing)

Input type equal to button….value .In Value we shall write, set cookie… onclick event …. equal to set cookie

Input type equal to button here we will write get cookie and here again in function we will write get cookie

inside script we will make both these set and get cookie

 Since we have three cookies, I will create get cookie first.

function get cookie..

 In this get cookie, we show the length of the cookies and if it is not possible an alert should pop up.

(typing)

 so, if… document dot…. cookie dot …length is not equal to zero

This is exactly what we do in every program. alert , that is our cookie, document dot…cookie… and in else….(4 seconds pause; typing) alert cookie is not set yet.(3 seconds pause ; typing) ..this is our programme..

 Now,

We will implement the set cookie function. ( 4 seconds pause ;typing) this ..is ..my function.

We have to store all the three input values one by one. Let’s say I want to store all the three values in the same cookie, we will check whether or not it is possible.

So here we will write,

variable info, we are taking variable info then in string, Name equal to, we generate cookie this way, so, name equal to, plus document dot.. get element by ID. and what is my ID

My ID is name. So name, value of name, it will come inside the name.

Now, plus then semicolon as we need to generate another cookie means another element

let’s say email… equal to, same as before get element by ID. but here, the ID is email and at the end we have our company name.

so, here comma… company name..equal to…here comes, company name…that is my ID and at the end … we will remove this semicolon, we won’t write anything here.

(3 seconds pause;cursor movement) it ends here,

We will add the semi colon when the program is completed.

So this was a string called info…okay !

 Now to create a cookie,

document dot cookie equal to.. (typing) what is my name of variable that is info…

okay so a cookie has been created.

So, in set cookie, I have taken all three input field’s values, I have added all the information in the respective field. I have taken the variable, and I have stored the variable in the cookie.

When we get it, we will alert the same thing.

So if I save.. and run this program,

So, first of all..

my xampp should be on for this.

We will go to Chrome, and go to the local host, my directory javascript.. open the program called multiple cookie, all the three input fields are here.

When I click get cookie I get the old cookies with colour and company name…okay !

So, let me delete these cookies first,

 I have removed the old cookies.

Now if I go to multiple cookies and click get cookie, it says ‘’cookie is not set yet’’.

It means none of the cookies are set. This message I got.

let’s say, I write my name here..let's add my name. email i will write abc@mail.com..(typing) and company name..Learnvern..

Now, if I do get a cookie, then the cookie is not set, so I get this alert back message..ok fine.. I won't get anything .

Okay, let’s say If I press set cookie, and then get cookie, then, you can see the name is equal to JOEL, which means the first cookie has been set.

But the other two cookies, email and name, have not been set. It indicates that when we want to set more than one value in a cookie, it is not possible. we can’t set more than one value in a cookie. In that case if we write code like this, the first value will be set. All the other cookies after the semicolon will not be set.

Now, if we want to do this, then,

There is only one way to achieve this, by converting these three cookies into independent cookies.

means instead of keeping these in info, what we can do is,first of all,

document dot cookie equal to, in that, I will take this portion.

 document.cookie equal to name equal to ..my name and dot value..

save. Now, at every place,

next document dot cookie and instead of name comes email. this portion, ok ?

(3 seconds pause;typing)

again document dot cookie and now my company name.

(3 seconds pause;typing)

We have set 3 different cookies that is name , email and company name

now if we want to access these 3 cookies

Now if we want to access these three cookies, we write,

 Let us run this and check the output, if I click get I’ll only get the name.  Then i write JOEL in the name , abc@mail.com and the company name is ….LearnVern,then if i do set and get cookie,

 I got all three cookies properly. Name..email..and company name..

this is our program, if we want to get a string by adding all three into one then we can’t do this. If we store all three in multiple cookies, then we can do it successfully.

When getting the cookies, we have to ensure that the name entered should be correct, so that we can access it properly. Here, we have stored these cookies in three different ways. If I want to do it in a single cookie it can be done by creating an object.

clear ! okay !

(13/02)

I can start doing this by copying and pasting the program,

If i save this exactly same programme,

(typing)

Example..multiple cookie..here, we will write multiple cookie..object

we don't need the set cookie option.We are going to set these values in an object.

What do we write in set cookie?

Let’s say I create an object, Let’s say I am taking an object named O B J.. or object 1.

Initially I am creating an empty, null object..

In these objects it should show what is being added as the three values.

Let’s say I write,

object1 dot name…in that, what I will write ?

this portion,

document dot get element by ID

I will add this portion till the value to it. The value in the main input will be my name.

(3 seconds pause ;typing)

Now, object 1 dot email, so here, it comes email.

The value of email will be in object one’s email property.

Now, here comes the company name.

whatever the company name is, it will be under the company name.

I have added the three properties in the object, but now I have to store this object in my cookie.

Object cannot be stored in a cookie that is why we always store string in cookies.

If I want to store something, I will create a string, we will take a variable because we are using the method called JSON dot stringify method. what JSON dot stringify does, It will convert the object passed into a string. For that we are making variable named json string.(pause 3 seconds ;typing))

jsonstring equal to JSON….dot…stringify

 I have written JSON in capitals so that I can access the method.

So json in capitals..stringify…My object will be passed here. That is object 1.

The objects will be converted into strings and will be stored in JSON string.

Now, what do I have to do ?

I have to create a cookie.

(16/07)

document dot ..cookie equal to jsonstring;

Everything in the JSON string is now in the cookie. This portion will remain the same so that all the three values stay are visible.

 If I save this program.

(6 seconds pause; cursor movement)

 as multiple cookie object.., back…, reload…, This is multiple program,

when I get it, I already have cookies.

name, email, company name…right!

Now I will add a different name like Rahul. In the email, def@mail.com and company name, last time we wrote a small v , this time we have kept all capitals. LEARN…VERN... l Get cookie, old data will show, set cookie, now, we will do get.

Now as you can see, we have two things here, name email company name as it is, because that was an individual cookie and then the cookie object. Whatever we have stored, we are retrieving from the cookie as a string portion. If it is in string, then it is not a proper view. For that, what can we do? In the get cookie, first of all, what will we do?

get cookie dot length that is fine. but, in that alert portion, in place of that, we write something like this,

var object2 , it is normal variable, equal to JSON dot..

now, at that place, that was json stringify, that converts current object into string and store the string, you can see string here, in this way.

If we convert the object into a string, now we have to convert the string into objects so that we can access it’s property. so, here it comes,

json dot parse, now we write that is in cookie, document dot cookie

Why?

Because in the cookie, there is an object which we will be parsing to object two.

It means the string will become object two.

Here we are converting the object into a string and storing it in the cookie.

Because cookie can only store string so we have to write this step.

We will convert the string back to an object.

Now we can access the properties of the object. Let’s say if I write

alert… name…equal to.. plus… object2 dot name , because it has stored our name, plus, here I will add slash N, so that it comes in a new line..

value equal to..plus object 2 , here value won’t come, here will be email.(3 seconds pause ;typing)

Email equal to slash n… company name equal to..plus.. object2 dot companyName

save.

because this stores the name. Save.

Okay guys let’s add the name, email address,

whatever we want to add, company name like learnvern,

 if I set and click on the get ,

you can see ,in name jeol, in email id , whatever we have set that, abc@mail.com..and in name we are getting learnvern.

So guys we can use this to set an object in the cookie.

Understood guys !

So we converted the object into strings, we shared the cookies to objects, and then we parsed the entire object into cookies. And when we needed the values from the cookie we converted it back to a string, and from the object properties we can access the properties.

So guys in today’s topic, we covered how to store cookies, and two methods to store cookies, we can store multiple properties separately and then store it in 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.

Thank you. ( edited script )