PDA

View Full Version : "Biscuits..."



pcbrainbuster
03-02-2007, 12:58 PM
Hello :),

I have read about cookies and how to create them for a long time but just don't understand how it works and obviously how to script it....

So can anyone throw in a simple cookie script that pompts for your name and rights it in the document?

Thanks :)

BLiZZaRD
03-02-2007, 02:29 PM
See this article (http://webdesign.about.com/od/cookies/a/aa083198.htm)

Blake
03-02-2007, 02:41 PM
Here's a script I just wrote (with a little help from my personal copy of Javascript: The Definitive Guide (http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=pd_bbs_sr_1/103-2880235-9903854?ie=UTF8&s=books&qid=1172849266&sr=8-1)).



<html>
<head>

<script type="text/javascript">

function readCookie()
{
var pos = document.cookie.indexOf("namecookie=");
if (pos == -1) {alert("cookie not found"); return false;}
var start = pos + 11;
var end = document.cookie.indexOf(";", start);
if (end == -1) end = document.cookie.length;
document.getElementById("yourname").value = document.cookie.substring(start, end);
return true;
}

function writeCookie()
{
var mycookie = "namecookie=" + document.getElementById("yourname").value;
mycookie += "; max-age=" + (60*60*24);
document.cookie = mycookie;

}

</script>
</head>
<body onload="readCookie()">

<form name="form1">
<fieldset style="display: inline;">
<legend>Enter your name</legend>
<input type="text" id="yourname">
<input type="button" value="Submit" onclick="writeCookie()">
</fieldset>
</form>

</body>
</html>

pcbrainbuster
03-02-2007, 02:42 PM
Thanks for your post blizz :),

But like i said above, i simply do not understand what sites are trying to say - please bare with me i still consider myself begginer...

And so i need someone to explain the parts i need to understand until i understand it :)

(currently examining blakes post)

Blake
03-02-2007, 02:46 PM
I think it does what you are asking. If not, I can modify it.

Try adding alert(mycookie) at the end of the writeCookie function. That would probably help you see what is happening.

pcbrainbuster
03-02-2007, 03:14 PM
Nice script Blake :),
And thanks for making your script easier then most - but still there are billions of questions i may need to ask...

1) Were is the cookies time (how long the cookie is valid) located in the script ?
2) Please explain pretty mych all the code :)

Thanks :)

Blake
03-02-2007, 03:25 PM
Ok.

The readCookie function:

This function's job is to check and see if a cookie with the user's name has been set. If it finds one, it fills the user's name into the form, and returns true. If not, it alerts you that no cookie was found at returns false.

Here it is again, with comments inserted to explain it line by line:



function readCookie()
{
var pos = document.cookie.indexOf("namecookie="); // look through all cookies and find one that starts with "namecookie=" (becuase namecookie is the name we gave to our cookie)
if (pos == -1) {alert("cookie not found"); return false;} // indexOf returns -1 if the string is not found
var start = pos + 11; // the position return is where the string "namecookie=" starts. We want to find where the actual name starts, so we add on the length of "namecookie="
var end = document.cookie.indexOf(";", start); // find the position of the semicolon that marks the end of the cookie's name. Start the search where the name starts (the second parameter).
if (end == -1) end = document.cookie.length; //no semicolon, so the name goes to the end of the string. Take all of it then.
document.getElementById("yourname").value = document.cookie.substring(start, end); // fill the cookies name into the form.
return true;
}


The writeCookie() function:

The writeCookie function creates a string of the form "namecookie=[name]; max-age=86400", where [name] is replaced by the name you enter in the box. This creates a cookie called namecookie with value [name] which will expire in one day (that's what the max-age bit does.)

Here it is, commented:



function writeCookie()
{
var mycookie = "namecookie=" + document.getElementById("yourname").value; // the variable mycookie stores the string to be written as a cookie. We initialize it as "namecookie=" followed by the text written in the box in the form.
mycookie += "; max-age=" + (60*60*24); //add on max-age=864000 (length of 1 day) so that the cookie expires in one day.
document.cookie = mycookie; // Write the cookie.

}

pcbrainbuster
03-02-2007, 03:43 PM
Grrrr, i still do not understand it :(
Have you any suggestions ? :(

Blake
03-02-2007, 03:59 PM
Ok, let's go through the readcookie function, line by line.


var pos = document.cookie.indexOf("namecookie=");

In this context, document.cookie gives us a string containing all cookies associated with the current document. We want to find the cookie whose name is namecookie in that string. If a cookie by that name exists, it will appear somewhere in that string. It will start with namecookie=, followed by the cookie's value. To find where the cookie appears in the string, we just use indexOf() to search for namecookie=


if (pos == -1) {alert("cookie not found"); return false;}

If the string namecookie= was not found, there is no cookie whose name is namecookie. Alert th use that the cookie was not found and return false (returning true or false is not necessary for this particular script to work).


var start = pos + 11;

Now we know that there is a cookie whose name is namecookie, and it starts at position pos in the string containing all cookies. However, that position is where we find "namecookie=", not the cookies value. The cookie's value will start immediately after the = sign. To get that position, just add 11 to pos (the length of the string "namecookie=").


var end = document.cookie.indexOf(";", start);

The cookie's value will be terminated with a semi colon. We want to know where the cookie's value ends, so start at position start (where the cookies value starts), and look through the string containing all cookies until we find the next semicolon. That tells us where the cookie's value ends.


if (end == -1) end = document.cookie.length;

If we do not find a semicolon, the cookie's value must extend to the end of the string containing all cookies, so we make the end equal to the end of that string.


document.getElementById("yourname").value = document.cookie.substring(start, end);

Now we now that the cookie's value starts at start and ends at end, so document.cookie.substring(start, end) will give us the cookies value. Fill that value into the form.


return true;

return true to indicate success. (again, not necessary).