Home arrow JavaScript arrow Page 3 - Using Cookies With JavaScript

What's In A Name? - 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



It's not very difficult to create custom cookie-handling code - after all, all you're really doing is parsing and manipulating a set of values in an encoded string. JavaScript makes it even easier by exposing a "document.cookie" element that does most of the dirty work for you; all you need to do is give it the cookie data to be written. Consider the following example, which illustrates:

script language "JavaScript">
<!-- start hiding 
function writeCookie
// ask for input
 var name = prompt("What's your name?", "");
 // set expiry date
 var d = new Date("January 31, 2004");
 var cd = d.toGMTString();
 // set cookie parameters
 var c = "username=" + escape(name) + ";expires=" + cd;
 // write cookie
 document.cookie = c;
// stop hiding -->

body onLoad="writeCookie()">

Most of this is pretty simple: the prompt() method takes care of popping up a box for user input, and the corresponding value is encoded into the cookie string for storage. Similarly, a Date object is instantiated with the cookie's expiry date, converted to the requisite format using the Date object's toGMTString() method and the resulting value is added to the cookie string as part of the expires attribute explained earlier. Once the cookie string is ready, the document.cookie property takes care of writing it to a file.

Now, try running the code above in your browser. You should see an input box. Enter your name into the box. The value you entered into the box should now be saved as a cookie to your hard drive. If you're the suspicious type, verify this by looking in your browser's cookies directory; you should see a cookie with contents like this:


>>> 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: