Home arrow JavaScript arrow Page 4 - Using Cookies With JavaScript

Cookie-Cutter Code - JavaScript

In this article, find out how to store and retrieve persistent data with cookies, small files that allow you to do big things. This article explains the basics of cookies, demonstrates reading and writing them in JavaScript, and illustrates their use in a real-world application.

  1. Using Cookies With JavaScript
  2. Caveat Emptor
  3. What's In A Name?
  4. Cookie-Cutter Code
  5. Running The Numbers
  6. Speaking Native
  7. Dinner Time
By: Melonfire
Rating: starstarstarstarstar / 158
April 26, 2004

print this article



Now, that was pretty simple -- but there's more than one way to skin a cat. If you're in a rush and don't have too much time to spend on implementing a custom cookie library, the Web throws up a number of interesting public-domain libraries which are powerful, stable and easy to use.

The best-known of these public-domain cookie libraries is the one created by Bill Dortch in 1996, and used extensively in many sites on account of its rich features and overall stability. Coincidentally, this is also the library I plan to use throughout the rest of this tutorial, so drop by and download a copy before reading any further.

Once you've got yourself a copy of the library, copy it to your development area, and create the following simple HTML document (remember to use the correct path to the library when linking to it in the JavaScript tags):

<script language="JavaScript" src="cookieLibrary.js"></script>
<script language="JavaScript" type="text/javascript">
function writeName() 
 // get user input from form field
 var user = document.forms[0].elements[0].value;
 // calculate expiry date 1 hour from now
 var d = new Date();
 d.setTime(d.getTime() + (60 * 60 * 1000)); 
 // write value to cookie
 SetCookie("username", user, d);
 alert("Data written successfully");
Enter your name
<input type="text" name="username" size="10">
<input type="button" onClick="javascript:writeName()" value="Save!">

With the Bill Dortch library, setting a cookie is as simple as calling the SetCookie() function with appropriate arguments. The first two of these arguments are the mandatory name and value parameters - these must be set for the cookie to be valid. For persistent cookies, you would also follow these two arguments with an expiry date set to 60 minutes ahead of current time (60 minutes * 60 seconds * 1000 milliseconds); this will ensure that the cookie is saved to the hard drive and remains valid for 1 hour. For non-persistent (session) cookies, simply omit this expiry date.

Here too, once you've entered your name into the form and hit the
"Save!" button, your cookie will be saved to disk in your browser's cookies directory. If you look at the code for the SetCookie() function, you'll see that internally, it does pretty much the same thing you manually did in the example on the previous page.

>>> More JavaScript Articles          >>> More By Nariman K, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: