Home arrow JavaScript arrow Page 6 - Using Cookies With JavaScript

Speaking Native - 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
Poor Best
Rating: starstarstarstarstar / 158
April 26, 2004

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

So that takes care of writing cookies, and then reading the values back. Now, how about a composite example that you can actually use?

In this next example, I'll assume a multi-lingual Web site, where the user has a choice of viewing the content in either French or English. The first time the user visits the site, (s)he is permitted to select one of the two languages. This choice is stored in a cookie, so that on the next visit, the client is automatically redirected to the chosen language without requiring the user to re-select a language.


<html>
<head>
<script language="JavaScript" src="cookieLibrary.js"></script>
<script language="JavaScript">
// check to see if cookie exists
// if yes, redirect to language page
if (GetCookie("lang") == "EN")
{
 document.location.href="index.en.html";
}
else if (GetCookie("lang") == "FR")
{
 document.location.href="index.fr.html";
}
 
// function to write selected language to cookie
function lang(l)
{
 // set expiry date for 1 year from now
 var d = new Date();
 d.setDate(d.getDate() + 365); 
 
 // write cookie
 SetCookie("lang", l, d);
 
 // take user to appropriate language page
 if (l == "EN")
 {
  document.location.href="index.en.html";
 }
 else if (l == "FR")
 {
  document.location.href="index.fr.html";
 }
 
}
</script>
 
</head>
 
<body>
 
<h2>
Please select your language:
<ul>
<li><a href="javascript:lang('EN');">English</a>
<li><a href="javascript:lang('FR');">French</a>
</ul>
</h2>
 
</body>
</html>

That was simple enough. When the user visits the page, the code first checks to see if a cookie with the selected language already exists. If it does, the browser is automatically redirected to pages in that language. If no cookie exists, it implies that the user has not selected a language, and so a language choice is displayed. The language selected is then written to a cookie in preparation for the next visit.



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

blog comments powered by Disqus
   

JAVASCRIPT ARTICLES

- 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...
- Building Resizable Containers with the Ext J...
Find More JavaScript Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 1 - Follow our Sitemap

Dev Shed Tutorial Topics: