Welcome back.
So now that we have the ability to set cookies and don't forget that you need to be in the HRT protocol,
not the final protocol, because you can't set cookies that way.
We're going to also want to check to see which cookies exist.
So that's the get cookie function.
So when we retrieve back the cookie values, we can do that by getting the cookie document value.
So could create a holder for that.
And this can be called cookies using the document object.
Getting the cookie value and we saw that last time, that if we write in a document cookie, we see
a listing of all of the cookies.
And if we have more than one type of cookie that we're setting in here and let me try that one more
time.
So now we've got two cookies and they're separated by the colon.
So we want to do is take that cookie object and use JavaScript split to split all of the cookies that
are currently contained within cookies.
And we can console log out cookies whenever we do the get cookie.
So you can see that when we do get cookie, we get both of the cookies that we set.
So we want to do is we want to update we can also update that inner HTML of the output.
So in case we don't find any cookies if we don't have any no cookies found.
So this one just will say no cookies found and we'll update it as we loop through the cookies that we
do find.
And for each.
And we have to look for a specific we can use item and index as well, so just as we used it before,
so we want to make sure we want to check each one of the cookie names as we iterate through.
So selecting the item.
And we know that the item what we want to do is we want to trim the contents of item.
So using JavaScript trim method, this will remove any of the whitespace.
And maybe we can call this temp cookie.
So we're taking each one of those and we want to split again, so on to create another array and this
time splitting it by the equals sign.
So this will break.
So first we're splitting it by the colon.
And you can see here that we've got a string for the cookies.
We split it by colon.
So that returns back an array with the two different cookies.
And you see here we've got the white space.
So that's why we're applying trim and that will trim any of the white space in front and after the string
value.
So that will return back just the string value and then we can use split to split it by the equals sign.
And that will actually give us the cookie name where we can check.
So if we cancel, log this out now.
And I know we've got quite a bit of stuff here going on in the console, but this is just so that you
can see when I do get cookies, we're returning back and we're splitting each one of those cookies.
So we've got the name and the value.
So as we loop through, we want to check to see if the name is equal to the name that we're looking
for.
So we're passing in a parameter here and checking to see if tempt cookie and because this is an array
so in and get the first item in that index.
So checking to see if temp cookie is equal to the name that was passed in as the parameter.
And if it is, then this is where we can output the content from the cookie.
So taking that cookie and we can say found and then we can set that as the cookie name if we wanted
to.
So temp cookie.
And we want to also apply one more trim on that as well.
So just in case we have some excess spacing around that item, we can trim that and then let's output
the value and remember how we encoded it over here.
The value.
Well, in this case, we can decode.
So instead of encode, this is going to be decoded.
You are a component and we're taking the value from temp cookie one with the index value of ten, cookie
one, as we saw.
This is the value that's contained in there.
So let's try that out and outputted it into our console.
So again, refresh, make sure you're in the protocol and now we can get cookies.
We know that we have a cookie by test name.
So if we get the cookie, we see that the cookie is test value.
So let's set this cookie as a test value.
Five five five five.
Now, when we do get we get that value being returned back.
So even if we refresh and if we do get that, it's a cookie.
So it's staying within the browser and we see that we're returning back the right value that we had
set last time.
And their current value right now is test value.
So we can set it.
And if we refresh and do get value, we see we're returning back to value.
So that's how we can get cookies and I'll show you how we can quickly erase a cookie.
So we saw when we were setting a cookie that we were getting the document cookie.
We had the name.
We're setting some information here and we can use the same thing.
So for the erasing of the cookie, what we need to do is pass in that name.
So that's the only thing that we really need and we can update its value.
So it's not going to actually have a value because effectively we are raising it.
So there's no value.
The path is fine and we're going to set the expires.
We're going to set it as a date and old date.
So that will automatically expire that cookie value.
So instead of setting a date.
Setting it up as Thursday zero one, so any of the past dates is fine, 1970, and we're going to set
it to the first.
Value empty, and so what will happen here is that the cookie will be removed, so, Cookie, what that
name is going to be removed and we can output some information into the output content.
Let's try that in our browser.
So refreshing.
And again, remember that file protocol.
So let's get the cookie.
So we've got this cookie and now we want to delete the cookies.
So the cookie name, we're going to delete it.
So cookie name has been removed and when we do get cookies, no cookies found by that name.
So we need to set it again and then we can get it and we get the cookie value.
So that's how you can erase cookies.
And lesson that we want to do is list out all the cookies.
So this is going to be similar to what we just did with the cookie.
And then we can complete the application where we can list out all the available cookies that have been
set.
So that's all still to come in the upcoming lesson.