Cookies are small infomation packets that are stored on your computer and are only accessable by the site that sent them. They are hardly dangerous at all since they cannot store anything unless it is provided by you or the site itself. Also the information that they store cannot be given to the site unless you allow it to be sent.There are a few flavours of cookies including Javascript, CGI, and Java. Since Javascript cookies are the easiest to prepare we'll begin with those. To understand cookies you will first need to know at least a little bit about Javascript. For a beginner's course head over to: Introduction to Javascript.
To begin the cooking section we first need the basic ingredients of any good cookie recipe.
These include the ability to Set, Retrieve, and Delete cookies. Paste these Basic Cookie Functions into the HEADer of you HTML page.
Then you need to decide what you would like to cook up. There are many things that you can use cookies for. You can show a different message to new visitors than if they are repeat visitors. Cookies can also be used to store information on what items you choose when you go to an online shopping site. Let's see how the first one could be done.
Recipe #1 - Tracking Visits
When a new user visits your page you might want to display a little message like: "I am glad you are visiting my web page. Please sign my guestbook before you leave". And if they return later you could say: "Thank you for coming back, enjoy my page!" So let's get started and I'll explain the process as we go along.
- 1. Don't forget to get the Basic Cookie Functions.
2. Set some variables.
var newVisitor = 'I am glad you are visiting my web page. Please sign my guestbook before you leave.';
var repeatVisitor = 'Thank you for coming back, enjoy my page!';
var yourMessage = ' ';
|
Here the two messages have been defined and a variable created that will contain the final message to be displayed.
3. Check if the visitor already has your cookie(ie. they've already visited before).
var visitsCookie = getCookie('Visits');
if (visitsCookie == null) yourMessage = newVisitor;
else yourMessage = repeatVisitor;
|
Now check to see if the visitor alreay has your cookie called "Visits", if they do not then the newVisitor message will be displayed, otherwise the repeatVisitor message will.
4. Design/Decorate your cookie.
var expiration = new Date();
expiration.setTime(expiration.getTime() + 604800000);
setCookie('Visits', 1, expiration);
|
In the section above I have first set an expiration date for the cookie. The number 1000 represents one second so that large number for 7 days was got by multiplying 1000 by the number of seconds in 7 days. You can really set any expiration date you want. The setCookie function consists of three things, first the name of the cookie which in this case it "Visits", then the value of 1, and then the expiration date. Parts 1-4 of the recipe go in the HEADer of your page.
5.Finally you need to insert the message into your page.
document.write(yourMessage);
|
Place that within the BODY of your page between the script tags.
All Done!
To watch this recipe bake,
take a peek into the oven.
Now that you have a taste of some cookies, here are some places to further your cookie addiction.
Robert Brook's Cookie Taste Test
Cookie Central
Adding Cookies to your Site
Enjoy!!
|