It ready to start setting some cookies within the button action function, we know that we can detect
what type of input it is and what the name of the value is.
So the cookie values of taking all of those values from the inputs over here, we've got set and that
within temp.
So we can use that as a condition where we can check to see if temp is equal to set and if it is equal
to set, then this is the action that we want to take and this particular action, we want to set a
cookie.
So we need to pass some information and we're going to create a function in order to handle that.
So we're getting our cookie object, which is contained within V and setting a cookie name the parameters
that we need.
Other thing that we need is a cookie value.
So again, going and looking in that object and this is again being constructed from the inputs, we're
going to set a cookie value.
And then lastly, let's set a cookie expiry values.
So let's cookie expire.
So these are coming from the input values.
This is going to be a function where we're using set.
We can also have different conditions where we do else if and checking to see if temp is equal to get,
then we can run a function for a get as well.
So this function could be we can't call this or call this one yet and we only need one parameter.
So that's the cookie name that we need to send.
And also let's apply a few other conditions.
So we're check to see if it's delete and if it's delete we can do on iRace Cookie.
So how about we set it as a race cookie function?
And then lastly, if this is equal to all, then what we want to do is just list the cookies.
We can just call that list cookie so we don't have to send any parameters into that function.
So that's all of the functionality we need.
And next, we just need to create the functions in order to handle that.
So the first one is sending set cookie and set cookie is getting a few parameters.
Pastan So setting up the function, call it set cookie and the parameters that we're passing in so that
we've got a name, we've got a value and we've got an expiry value.
We also have a get cookie.
So then get Cookie what we're returning back.
And what we're expecting is just the name.
We don't need value, we don't need expiry.
So this one is get cookie.
So setting up all the different handler functions in order to handle that.
We had another one that we called Arace Cookie and this array's cookie is retrieving back, using the
cookie name.
And then lastly, we have one last function.
And this function is just going to be called list cookies as no parameters being passed in here.
So this is list cookies and this will handle the listing of all of the cookies.
So let's see what happens.
So so far, not a whole lot.
And we need to be able to set a cookie.
So show you how to do that.
And in order to set a cookie value in JavaScript, you need to have a date value to date object value.
So we're passing in that expire value and we can console log that expire of value out.
And because it is within a date format, we can use the two UTC string method in JavaScript.
So see what happens when we try to set a cookie.
So let me refresh that and we set a cookie.
So we're getting that UTC string value.
So this is something that we can use in order to set our expiry date.
So all we have to do now is specify and set the cookie using JavaScript.
And we also want to make sure that we are setting we are we do have a value that we're setting.
So we're checking to see if the value that's Pastan and value a length is greater than zero.
So that means that we can set the cookie.
And if it's not, then let's output some content within the output and adding the text content.
So this is a message that's going back to the user kookie needs a value, so try that one out.
So if we don't have a value into here and we do set kookie, we get an error message that cookie needs
a value being sent back.
And over here we can do cookie set set and we can also add in the name as well.
So let's add that in now.
So passing in the cookie name and you can try this one.
So do set and Cookie Testim set.
So you've got some information, but of course we haven't set the cookie.
And in order to set the cookie in JavaScript, it's relatively easy and straightforward.
So you use document and then using the document object, you can set the cookie into that document object.
So that's all you need to do.
And you do need to pass in the parameters.
So it does need a name and then we've got an equal sign.
So there is a strong value that needs to be added in.
We also need to encode you are I component.
So what this does is this encodes the name of it and encodes that, I should say encodes the value that
we're passing in.
So make sure that there's no spaces and that it's encoded properly, separated by a semicolon.
And then we need to specify the path of where the cookie is located.
So we're just doing a default path as we're not setting that.
And then lastly, the other parameter that we can set here is the expires of the cookie.
So this is going to be a value that we're getting from expire and we're setting this value, the UTC
string value.
So so we console logged that out.
And in order to set cookies, I did want to note something that the cookies won't set within the file
protocol.
So if you're just using the regular path on your computer to access the application, that HTML, JavaScript
and access will run, but you're not going to actually be able to set a cookie.
And you can see this when you go in your console, when you type in document cookie, you're going to
see that it returns back blank because not able to set it within the file protocol and in order to set
cookies, it needs to be done within the protocol because they are domain based.
And Brackett's does give you an option to create a local machine.
Go to Brackett's and it depends on your editor.
Some editors will have these types of features and others might not do live preview.
If you go to Brackett's, this will open up the live preview window and run the index file within a
file protocol.
And you can see that because it's got the IP address as extension running in the file protocol.
And this is where you can actually set Cookie.
And now if you go to the inspector, go into the console and then document cookie, you see that the
cookie value now has been set.
So if we update this value and if we do set Cookie again and then again the document cookie, you see
that now it contains that new value.
So it is setting that cookie value.
But this is only available within the local machine or the HTP protocol.
So you do need to make sure that you're not running within the file protocol.
And on a Mac, you can see when I'm running in Chrome, it has file.
So it gives you the site information as file.
And this is just an opened index.
The life preview version in brackets opens it up within the protocol and allows you to set cookies so
you will need to run it H.T. protocol in order to see the cookies.
But you can see the interaction with JavaScript and the DOM in the regular file protocol.