If you're looking for a basic introduction that explains what Cookies are, this is not it, try HTML Cookie Introduction. This short tutorial just tells you what's possible from javascript, and how to accomplish that.
If instead you'd like to know how to deal with Cookies from PHP, see HTML Cookies From PHP.
All javascript Cookie handling is done through document.cookie. You can use it to get a list of Cookies (with one restriction we'll see later), you can use it to set Cookies (again with one restriction), and you can use it to delete Cookies.
Setting Cookies in javascript is quite easy.
The syntax is just the same as it is for the Set-Cookie header. I'm not going to cover the syntax here, since it's covered thoroughly in HTML Cookie Introduction. The only difference when using document.cookie, is that you can't set a Cookie with the HttpOnly attribute. The whole purpose of the HttpOnly attribute is to create a Cookie that you can not see from javascript in order to fight cross site scripting attacks.
It looks like you're assigning to a variable, but it's really some sort of magic, because you can assign to it over and over again, and if you check the value of the document.cookie, you'll see all of the Cookies you set are in there.
To get Cookies from javascript all you have to so is to grab the value of document.cookie.
You get all the Cookies that might apply to the current page, with the exception of Cookies with the HttpOnly attribute set. They all show up in one string:
Notice that none of the attributes show up. There's no user interface from javascript to see any of the attributes.
If you need them individually, you can use split.
That will make an array like
To delete a Cookie, you assign to document.cookies exactly the same as when creating one. The only difference, is that you must specify an Expires attribute, and it must be in the past. Any time in the past will do, even one second in the past.
Below on the left, we have a form to set a Cookie in one of two ways. It will either set the Cookie from javascript by assigning to document.cookie, or it will set the Cookie by using an XMLHttpRequest to send off a request to a PHP page I've created which will send back a Set-Cookie header to set the cookie for you. The reason I provided that is so that you can experiment with setting a Cookie with the HttpOnly attribute set. You can only do that from the server side.
On the right you'll see two views of the Cookies. First are the Cookies extracted from document.cookie in javascript. Below that you'll see Cookies that come from sending via XMLHttpRequest to another PHP script that iterates through the Cookies sent along with the request, and returns them as the result of the request. That way you'll be able to see that from PHP a cookie with HttpOnly set is visible, but from javascript it is not.
To delete, in either case, I set the Expires attribute 1 second in the past. Notice that you can delete via the server or via javascript, with the exception that you can not delete a Cookie with the HttpOnly attribute from javascript.
One thing I'm not covering is the Secure attribute. It works just like all of the rest, but I don't pay the extra to let you get to my site via https, so we couldn't set them nor see them.
Remember, this sets cookies on your machine. The domain will always be the same as the page so that you can set them, and see them. They will always be set to expire when the session is over unless you click the Date in past to delete? button to delete them. The Path is always '/'. Secure is never set.
You'll notice that if you try to set a Cookie via javascript with the HttpOnly attribute it won't work. My code will dutifully try, but you aren't allowed by the browser.