HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Javascript problem with Cookies
Post new topic   Reply to topic    HTML Help Forum Index -> PHP
View previous topic :: View next topic  
Author Message
ropp



Joined: 23 May 2006
Posts: 1

PostPosted: Tue May 23, 2006 9:14 pm     Javascript problem with Cookies Reply with quote

Hi there,

I've been struggling at school to finish the javascript task but I've failed to grasp the logic of cookies.

So far I have two generic functions (addCookie and getCookie) and I need to call on them in my saveLoginInfo and getLoginInfo functions. I placed saveLoginInfo into the FORM tag with onSubmit and getLoginInfo into the BODY tag with onLoad. However, writing the functions has confused me greatly. So far I have this:

Quote:


function addCookie(tag, value) {
var expireDate = new Date();
var expireString = "";
expireDate.setTime(expireDate.getTime() + (1000 * 60 * 60 * 24 * 365));
expireString = "expires=" + expireDate.toGMTString();
document.cookie = tag + "=" + escape(value) + ";" + expireString + ";";
}

function getCookie(tag) {
var value = null;
var myCookie = document.cookie + ";";
var findTag = tag + "=";
var endPos;

if (myCookie.length > 0) {
var beginPos = myCookie.indexOf(findTag);
if (beginPos != -1) {
beginPos += findTag.length;
endPos = myCookie.indexOf(";", beginPos);
if (endPos == -1)
endPos = myCookie.length;
value = unescape(myCookie.substring(beginPos, endPos));
}
}
return value;
}


function saveLoginInfo() {
if (document.CustomerLogin.ID.value != null) {
addCookie("ID", document.CustomerLogin.ID.value)
}

if (document.CustomerLogin.ID.value != null) {
addCookie("Password", document.CustomerLogin.Password.value)
}

addCookie("SavePassword", document.CustomerLogin.SavePassword.value)

}


function getLoginInfo() {
var ID = getCookie("ID");

var Password = getCookie("Password");

var SavePassword = getCookie("SavePassword");
if
(document.CustomerLogin.SavePassword.checked == true)
else (document.CustomerLogin.SavePassword.checked == false)

}



saveLoginInfo is supposed to save Login, Password, and a checkbox called "SavePassword" if it is ticked.

The part where I'm most lost in is the getLoginInfo function where I'm trying to populate the fields that have a cookie saved. Any tips on where to go from here?

Thanks.
kanenas



Joined: 14 Dec 2004
Posts: 191

PostPosted: Thu May 25, 2006 11:55 pm     Assign cookie values to form element values Reply with quote

For the most part, your code looks great (exceptions: saveLoginInfo and getCookie each have 3 bugs, while getLoginInfo probably has 1; more later), though I don't know as though the design is very secure (I'm guessing that's because the instructor wanted to keep it simple).

I'm not certain exactly where your confusion lies. My best guess is you don't know what to do after the "if (document.CustomerLogin.SavePassword.checked == true)" test in getLoginInfo, or at least don't know how to do what you want to do (which puzzles me as you seem to have the skill). (By the way, this test is the probable bug in getLoginInfo; depending on how the field is set to checked/unchecked, the test may work or always succeed or always fail. If CustomerLogin.SavePassword is set server side, then all is well, but if you hope to do it client side, you'll need to add some scripting [as I did in my examples below].) If you want to populate the form fields, just assign to their values:
Code:
function getLoginInfo() {
  ...
  if (eval(getCookie('SavePassword'))) {
   document.CustomerLogin.ID.value = ID;
   document.CustomerLogin.Password.value = Password;
   document.CustomerLogin.SavePassword.checked = true;
  }
}


Or even:
Code:
function getLoginInfo() {
  if (eval(getCookie('SavePassword'))) {
   document.CustomerLogin.ID.value = getCookie('ID');
   document.CustomerLogin.Password.value = getCookie('Password');
   document.CustomerLogin.SavePassword.checked = true;
  }
}


Note that, as you're using a client side script firing on the load event, the user will see field value flash (i.e. the fields will initially appear empty, then fill after a noticable delay). This will probably be mildly surprising and hence something you want to avoid when designing an interface. For an actual login system, it'd be better to have a server side script set the values of the fields, which won't result in a flash.

For security reasons, a production system wouldn't store the password in a cookie. How you store and pass session information is a complex topic as you need to ensure the security of both the server and client. Using HTTPS rather than HTTP will simplify some of it, but it's not the final solution. Unfortunately, I don't have a quick list of links on the subject for you.

On to the bugs. In saveLoginInfo, the tests on the form element values will always be true because the default value will be at least ''. Note that if you test against the value of a variable rather than a comparison, it will be false if the value is an empty string, boolean false, numeric zero, numeric NaN, null or undefined (a string '0' or 'false' evaluates as true). Secondly, the second test should be against the Password field rather than the ID field. Thirdly, save the 'checked' state of "document.CustomerLogin.SavePassword", not its 'value'.
Code:
function saveLoginInfo() {
  if (document.CustomerLogin.ID.value) {
   addCookie("ID", document.CustomerLogin.ID.value);
  }

  if (document.CustomerLogin.Password.value) {
   addCookie("Password", document.CustomerLogin.Password.value);
  }

  addCookie("SavePassword", document.CustomerLogin.SavePassword.checked);
}


As for getCookie, there's two bugs of minor import and one of medium. The minor bugs stem from the ';' appended to document.cookie: 'myCookie.length' is always > 0 and 'myCookie.indexOf(";", beginPos)' (and hence endPos) will never equal -1. This won't cause any undesirable behavior, it just turns an optimization and a safety check into a pessimization and dead code. The more serious bug is that cookies whose names are suffixes of other cookies may match the other cookies. For instance, if document.cookies == 'SavePassword=false; Password=chicken; ID=gonzo', then getCookie('Password') will find 'SavePassword' and return 'false'. I suggest instead you apply a regular expression to the cookie string. You can use pattern matching to extract the cookie value. I'll give you the opportunity to craft a RE; post what you come up with and I'll post what I did.

I realize this is a lot to wade through. You don't need to understand the solutions 100% as long as you are aware of the issues.
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> PHP All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial