Cookies are string handling incarnate. That is pretty much all they are, and they're relatively annoying/difficult strings to handle. There are 6 different things you need to know in order to make a cookie. Three are functions, one is a variable, and the other two are factors that need to be included in your cookie.
The first thing to know is that cookies are stored in the variable document.cookie. So to get your cookie, just do var my_cookie = document.cookie, and to set your cookie just do document.cookie = my_cookie. But cookies can't just be any random string of text-well, they can, but it needs to be a coherent system of "name=value" so that you can read your cookie more easily.
Two of the functions you'll use are escape() and unescape(). They turn your cookie into and out of a format that can be properly stored in the cookie variable. Escape turns it into that format, and unescape changes it back to what you originally wrote. Just put the variable you want to modify right there in the parentheses of the function. Shoot, you can even do it in the same statement:
my_cookie = unescape(document.cookie); document.cookie = escape(my_cookie);
The next function is one that sets the date that you want your cookie to expire. If you don't set this, it'll just be a session cookie that is deleted when the user leaves your web site. It is toGMTString(). But it only works on one type of variable - a date variable. Don't worry, it's easy enough. Just watch this:
var my_date = new Date("November 3, 2005");
var gmt_date = "expires=" + my_date.toGMTString() + ";";
The Date data type has much more depth that I will probably go into later, but for now that's all of it you need to see. So long as the date is in that format, it can be any date you want. And you have to set it equal to "expires", so that the cookie knows it's the expiration date you're giving it, not just some random day that you wanted to store in your cookie. Then you've gotta put a semicolon at the end of it.
Next, you have to set the path and domain that your cookie is readable in. You'd think that the browser would automatically allow any cookie stored by a page in a given domain would be readable in any other page in that domain, but it isn't so! To set which directories can read your cookie, you have to add "path=/;" to your cookie. Putting that (w/o the quotes) makes it readable by any page on your site. Just think of the path=/ as the root folder, and you can hone in if you don't want your cookie viewable by every page - "path=/teacher/cplusplus;". With that statement, that cookie is only readable in the cplusplus directory.
Now you have to set the domain. If your whole site has only one domain, such as reaperx90.tripod.com, you're ok. But if you have a big site with lots of little subdomains, such as pictures.mydomain.com, diary.mydomain.com, etc, you need to tell your cookie which of those it can be read in. You do that with "domain=mydomain.com;". Then it's readable by any page in your web site with that domain name - even if it has a subdomain.
Now that you know everything that needs to be in a cookie, I'll show you how to make and store it. Cookies are stored in a "name=value//name=value//name=value;" format. So each semicolon marks the end of the current cookie and the beginning of the next one (if there is a next one). So each of the components we learned were actually individual cookies. Also note that YOUR COOKIE WILL NOT WORK AS INTENDED unless you put a space after each semicolon you put into your cookie string. For example, the cookie will not recognize the expiration date on the cookie unless there is a space before the expires. Why? I haven't the slightest; that's just how it works. OK, here's an example of a simple code that gets a piece of info from the user and stores it in a cookie:
var user_name = prompt("What's your name?","");
var age = prompt("How old are you?","");
var my_date = new Date("November 3, 2005");
var gmt_date = " expires=" + my_date.toGMTString() + ";";
var my_cookie = "name=" + user_name;
my_cookie += "//";
my_cookie += "age=" + age;
my_cookie += ";";
my_cookie += gmt_date;
my_cookie += " path=/;";
my_cookie += " domain=reaperx90.com";
document.cookie = escape(my_cookie);
And that makes a simple, complete cookie. Click here to see that exact code execute, with a little alert at the end that shows you your cookie. And now lets move onto the fun part - grabbing that cookie.
First, you have to grab the cookie, and then unescape it. Then it looks exactly like what you saw in that prompt you got when you clicked the link above. To get the info from it, just split it up!
if(document.cookie != "")
{
var my_cookie = unescape(document.cookie);
var clipped_cookie = my_cookie.substring
(my_cookie.indexOf("name="), my_cookie.length);
var cookie_array = clipped_cookie.split(";");
var parameter_array = cookie_array[0].split("//");
var cookie_info = new Array();
var separated_info;
for(var i = 0; i < parameter_array.length; i++)
{
separated_info = parameter_array[i].split("=");
cookie_info[separated_info[0]] = separated_info[1];
}
}
Note: Text wraps here, but it shouldn't in the code. OK, that block of code checks to see if there's a cookie, and puts the relevent info into the associative array cookie_info with the format cookie_info["name"] equals the name stored in the cookie, and cookie_info["age"] equals the age in the cookie. This code works for any sized cookie though, so you could has any number of parameters stored and it would extract them into that format. Click here to see it in action. One note about the example. I generated an entire cookie and then broke it back down instead of storing it to your computer and pulling it back out. I did that in the unlikely event you have settings that don't allow cookies. Anyway, here's a play-by-play of the code you see above:
First, the if statement checks to see if anything is stored in the cookie variable, and the next line pulls and unescapes the cookie. The clipped_cookie line is a safe guard that clips off any hogwash that your host might have put in there before your cookie was stored. Then the cookie_array variable is turned into an array, each of which stores a cookie - the only part of it you're concerned with is the first part, which has all of the information. Then we take the first part of it and split it into name=value sections in the array parameter_array. Finally, we go into the for loop which traverses each member of parameter_array, splits the current member, stores it into separated_info, and puts the first part of separated_info in the brackets of cookie_info, which makes it an associative array, and stores the second part of separated_info in into the associative array value you just created.
And that's all she wrote. The code I wrote here works just fine, but in the real world it'll need some more fail-safes. The first one only checks to see if there is a cookie. But if your host puts a cookie in there, it might pick that up. Then it'll try to mess with that cookie and it won't look right. You'll also need to put a statement that makes sure indexOf("name=") does not equal -1. That will ensure that it is YOUR cookie that you're messing with, not your host's.