Use these to jump around or read it all…
[Why Set Cookies?] [My Cookie Script In Action]
[Setting the Cookie] [What’s It Look Like?]
[Retrieve the Cookie] [More Than One Cookie]
This tutorial was really a long time coming. People have wanted it for a while, but I’ve been somewhat reluctant to write it for a couple of reasons.
First, I knew that as soon as I posted something like this I would see people setting cookies all over the place. Cookies are very bad in some people’s eyes. You can read more about that in my original cookie reference piece. But furthermore… these things are hard!
Setting a cookie using
Why Set Cookies?
There are two main reasons that I can think of. The first is to “remember” information. Someone comes to your page and offers you his or her name. Next time, you greet them by that name. Clever, and a nice touch. But again, many people are wary of cookies and won’t feel comfortable accepting a cookie just so you can say “hi” at some later date.
The second reason, and the one I feel is most important, is moving information across pages. Someone chooses something on one page, and when they click to go to the next page, what they chose before is now posted there for them. It’s the whole basis for a shopping cart program.
My Cookie Script In Action
First off, this script is one I put together by heavily borrowing from the cookie script submitted by Giedrius. (That’s all…just “Giedrius”)
Any time you set a cookie, you need to gather some information. Usually it’s done in the format I’m showing here. Someone enters something into a text box, a button is clicked, and the cookie is written that contains the information provided by the reader.
Once the cookie is written, you can call upon it again and again. Try this:
Enter A Word:
Now… Click to go to another page.
I should tell you up front, at the moment, the script will not post multiple words in the text box. It’s easily fixed, but I’m trying to keep things pretty simple here, so just enter one word.
Setting the Cookie
Yes, it’s not that stunning as is, but it gets the point across. If I had you enter your first name, then I could have welcomed you again and again each time you arrived. If this was an order form, the next page would have the number you ordered already posted to the page. Get the picture?
Let’s start with the setting of the cookie. It’s actually a little easier than the retrieval.
I know that at this point most people quickly copy and paste the code. When you do, be careful of this line:
document.cookie=cookie_name+”=”+YouEntered+”; expires=Monday, 04-Apr-2010 05:00:00 GMT”;
The code above is on two lines. That’s bad. Make sure it all goes on one line. The width of the page made it break. Fix that when you paste it.
Start from the bottom…
When I talk about a script that deals with an HTML form tag, I like to start with them. So, here goes:
The form creates a text box and a button to fire up the function putCookie(). See that? The NAME of the form itself is “cf” and the NAME of the text box is “cfd”. Now, when we want to grab what is written in the text box, we create the hierarchy statement: document.cf.cfd.value.
With me? Good. Moving to the script, we’ll take it from top to bottom:
After hitting the last script, this one should fall together pretty easily. We’ll start after the
The first simply prints it to the page, the second puts it into a text box. Note the code that creates the text box requires the
