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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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:


<html>
<head>
 
<
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 -->
</script>
 

</head>
 
<
body onLoad="writeCookie()">
</body>
 
</
html>

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:


username
Guru
localhost/cookies/
0
4249743488
29612272
2610381856
29612264



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

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