Welcome back.
In this lesson, we are going to list the cookies, this could be very similar to get Cookie where this
case we're not going to be looking for any specific name.
And instead of just getting a specific one, we want to list out all the available cookies.
So the format is going to be roughly the same.
So let's copy what we did in the last lesson and get cookies and go down to list cookies.
Then we can paste that in and move it over.
So now we've got ability to list cookies.
So the format is the same thing where we get the document cookie object.
We split it by the colon and remember, we're listing all of that out.
So we do list cookies.
We see that we get all of the cookies being listed out.
So these are all the ones that are currently set.
This is all of the cookies that we've got that we found.
So notice it's within a string format and then as we update it so we can get rid of that console message
and as we loop through each one, we do the same thing where we trim, we split, and we don't have
a condition here where we're looking for specific cookie.
We want to build the cookie content out.
So let's do that and using our JavaScript, we're going to create a div using.
And equal that to document create element to JavaScript, way to create elements, we're going to create
a bunch of diffs and place that inside of that output.
So it's nice and neatly formatted.
Let's set some attributes to it so we can add a class name where we can do set attribute.
We don't have any classes quite yet, so we can go ahead and we can add in a class for that and set
up a class of cookie and then adding an event listener as well.
So Divx add event listener.
So whenever one of those gets clicked, then we can show some more information that's contained within
the cookie.
So outputting function.
And this is just additional.
So whenever any of those get clicked, we can output the cookie value so the temp cookie into the console
so that will output that information into the console.
And then lastly, let's output the inner text or text content of the cookie of the div that we're creating.
So let's create some inner text here.
And one of the things we need to do is list out the cookie.
So the cookie name, so that's the name of it.
And then we also want to set a value for it.
So just as we did here where we did the Decode, we can add that line of code in.
So it's going to output the contents and add it into the div that we just created and we can remove
rest that we don't need that information.
And then lastly, what we want to do is take our output element and append a child to it and the child
that we want to pendas this object that we just created.
So let's see what that looks like and do all cookies.
And we see we get a listing of all of the cookies.
So we don't need the no cookies found, of course, so we can clear that.
And all cookies are cookies are cookies.
And actually, instead of not listing anything, let's let's just leave it blank so it clear that out
so that whatever we do are cookies.
And if we set a new cookie with a new name, a new value.
So set cookie.
And now when we list it, we see all of those cookies.
And of course, when we click it, you see that we're listing them out.
So we could also set it to automatically delete the cookie if we wanted to, so we could erase the cookie
by the cookie name because we are passing that in.
So if we wanted a quick and easy way to erase the cookie, we could pass that information into the function
whenever it gets clicked.
So as we click, the elements are the cookies that we created.
When we're listing the cookies, we've got the value of temp cookie and we can remove out the cookie
with the cookie information.
So now we've got a quick and easy way and got a launch that live host again.
So notice sometimes with brackets it will open up and it opens up under another port.
But either way, you still see that you've got all of the cookies there and we can set a new cookie
and then we list out all of the cookies.
And now whenever I click on these, that's going to actually delete and remove the cookie.
So if I do all cookies, it's removed out those new ones that were outputting.
So lastly, let's add in some styling to this, because those are fairly compressed there.
And we did add in a class when we created the cookies.
And you don't have to add in the ability to remove it when you click it.
That's another option that you could have.
So creating a class for the cookie, let's add some padding around that and we can set the font size.
Also, maybe we want to set the font family to distinguish that.
A suit that looks like so do all cookies.
We've got our cookies information.
There's no cookies there.
So we're just getting undefined.
So we can also see that if there is no value for that index, then we can just simply put a value of
blank for it.
So instead of doing get cookie and if there's no value, if we delete it and if we do get cookie, we
see we're getting all of those values.
And now when we do our cookies, we get undefined.
So we might want to take care of that.
And instead of having a listing of all of the cookies that we're trying to output here, we might want
to just simply skip it if there's no value associated with it.
So let's add that in as well.
That's a quick fix where we check to see if temp cookie one has a value length.
So if temp cookie one length is greater than zero, then we know that we can add it into the array.
Otherwise we're just going to skip that part.
So now whenever I refresh and I hit all cookies, if there's nothing there, we don't see anything being
output there.
If I set a cookie and if I delete it and all cookies, it's just going to be blank.
So set a cookie and list it out.
You can see that the output is being output there.
Also, I'm going to update this to be for output so that all the content is looks the same, so all
the messaging looks the same way.
So go ahead and add this final update into your project.
And then coming up next, we'll do a quick code review.
So that's still to come.