Site Development
Downloads
Help!!
Home
Setting A Simple CookieA "cookie" is a small text file that you can write to the viewer's hard drive and read from other pages in your domain. This is the only way that JavaScript has to pass data from one page to another. Cookies can make a lot of effects possible with JavaScript that would otherwise require a backend database. Writing a cookie with JavaScript is easy. The "document" object contains a property called "cookie", or "document.cookie". Here's an example:
<script language="JavaScript"> When the above JavaScript is run, a small text file with your site's domain as part of its filename is written to the viewer's hard drive. The cookie will contain the string "This is some text stored in a cookie." This string can be read by other pages on your web site using the method described below. So, for the most basic cookie, you only need to set a string value for the "document.cookie" object. Click Here to see an example of a page that sets a cookie and another that reads it. Note that you may see some weird results in Netscape 6+ and Opera. This will be cleared up when we learn to use escape methods later in this lesson. Also remember that you must have cookies enabled in your browser. I can't stress this enough. When testing cookies, you should set your browser(s) to accept all cookies. You can readjust your cookie settings before you browse online. Reading A Simple CookieThe first page in our example sets the cookie using the following in its <head>:
<script language="JavaScript"> You don't really see anything happening on the first page, but the second page reads the cookie and displays its contents. Reading a cookie is just as easy as setting one. You just make up a variable and assign it a value of "document.cookie".
<script language="JavaScript"> I used "cookie_text" for my variable. You can use any variable name you'd like. This single line in red above will read the string stored in the cookie and assign it to the variable. To print the cookie's contents, just use "document.write()" wherever you want the cookies contents displayed:
<script language="JavaScript"> Remember that in our example, the cookie's data was read and stored in "cookie_text". You'd have to substitute whatever variable you actually used in your code. Cookie LimitsBeing able to pass data between the pages on your site has enormous potential. You can receive, say, a name or date from a form only once, and use it on all of your pages over long period of time. The viewer only has to enter the data once. Moreover, since the data is stored on the viewer's machine, the data can be made unique to that viewer and their browser. In short, your site can store data on the viewer's machine. This is like having a small, fast database. Because the cookie is stored on the viewer's hard drive, it doesn't take up any space on your site or server. Because a cookie allows reading and writing to someone else's hard drive, many security issues arise. To curb abuses of cookies, there are some intrinsic limits. Please note that browsers vary in limiting cookies and all modern browsers give viewers a great deal of control over accepting cookies.
If you've got a site with one domain name and set a cookie, a site in another domain can not read it without you setting all sorts of permissions. We'll go into this later. For now just keep in mind that only the pages from the domain that set the cookie can read the cookie. In short, a cookie set by "http://myfirstsite.com/" cannot be read by "http://mysecondsite.com/" without jumping through a few hoops.
There is no easy way around this, but there is some good news. All modern browsers have a privacy option that lets the viewer accept cookies from the current domain, but reject cookies from other, third-party, domains. This setting will allow your site's cookies to work on your site while blocking cookies from marketeers like Doubleclick. It's currently the most popular cookie setting. Escape() & Unescape()As we continue exploring all of the things we can write to a cookie, we'll come across the issue of special characters like "=", ":", etc. These characters can wreak havoc, especially the semi-colon (;), when trying to read a cookie and display its contents. Also, not all browsers will accurately read the simple cookie we've used above. We need to pass these special characters by encoding them as "escape characters" which are in hexadecimal code. This is not like using the "\" preceding special characters. Using the "escape()" method converts special characters into their hexadecimal code so they'll be passed accurately between your server and the viewer's machine. You've probably seen a lot of strings that include escape characters. They have things like "%20" or "%21" included in the string. These are the escape code for a space and exclamation mark respectively. To encode a string with escape characters included, we use the "escape()" method:
<script language="JavaScript"> Just put the string you want stored in the cookie in parentheses and precede this with "escape". This will encode the string with escape characters included. Click here to see an example of a cookie using escape characters. You'll see the escape characters when you click the first link. When we read a cookie with escape characters, we generally want to convert the special characters back to spaces and such. To do this we use the "unescape()" method:
<script language="JavaScript"> Get used to using "escape()" and "unescape()" when writing and reading your cookies. These become essential when using most practical cookies. Just remember to use "escape()" when writing a cookie and "unescape()" when reading one. When writing a cookie, using the "escape()" method is the last process involved in processing the string. When reading a cookie, the "unescape()" method should be the first thing done once the string is read and separated from some other stuff we'll eventually add to our cookies. Summary & Exercises
document.write(document.cookie); Generally, however, it's better to store a cookie's text (value) in a variable for further processing.
Practice making a page that sets a cookie and another that reads it. Use the "escape()" and "unescape()" methods. Don't worry about making multiple cookies or complex cookies right now. It's also important to note that your cookie will expire, or be deleted, when you close your browser. We'll learn about how to make your cookies last longer in an expiration date tutorial.
|
You can only read and write cookies from your domain. More generally, a cookie can only be read from the domain that set it.
A "cookie" is a small text file that is written to the viewer's hard drive by your site. One cookie can store up to 4KB of plain text and special characters.
To Next Advanced JavaScript Lesson
Back To Advanced JavaScript Index