A Different Type Of Cookie

In the previous lesson, we made a relatively simple string, wrote it to a cookie, and simply read it on another page. This has it's limits. Look at this example.

The form is the same, but the output is much more complex. The same form data is used repeatedly and there's a lot more static text around it.The output also contains HTML markup and might include other effects. That would be quite a long and complicated string to write to a cookie!

In cases like this, which are the most common, only the changing or variable data is written to the cookie. The page reading this data must parse it, or break the data string on the cookie into useable parts.

The variables will all be written in a single string to a cookie. This string will be read and broken down (parsed) back into the individual inputs. These individual inputs can then be used with "document.write()" to add dynamic content to a static page.

Demarcation And Making The String

The key to putting several pieces of data in a string and getting them back out lies in "demarcation". Demarcation means we'll put little "flags" in the string to separate each piece of data. The reading page can "see" these flags and use them to extract the individual pieces of data from the cookie's single text string.

Here's the string I had written to the example's cookie:

var stuff_for_cookie = name + "xxx" + lastname + "xxx" + flower;

First notice that only the variables and "xxx" are stored on the cookie. The "xxx" is a unique string that I'm using to separate the variable data in the string. The "xxx" separates the individual pieces of data.

If you were to view the string it would look like this:

entered_namexxxentered_lastnamexxxflower_chosen

What's important about this cookie string is that it only contains the changeable, variable data. There is no static text other than the "xxx"s used for demarcation. Now lets see how we can use our "xxx"s to extract the individual pieces of data when the cookie is read.

Using split()

Reading a cookie that must be split up into pieces is not a whole lot harder than simple cookie reading. We begin the same way by assigning "document.cookie" to a variable. On the page that reads the example's cookie, I began with:

var cookie_stuff = unescape(document.cookie);

The next step is to use the "split()" method to turn the cookie's string (now stored in "cookie_stuff") into an array containing the individual pieces of data we want to use:

var cookie_stuff = unescape(document.cookie);

var crumbs = cookie_stuff.split("xxx");

First I made up a name for the array I'll be making with the "split()" method. I called it "crumbs" because it will be holding the crumbs of my split cookie. You can call yours anything you want. Notice that only a simple VAR statement is needed for the assignment. We don't have to use "new Array()" in this case. Strings are automatically considered arrays of characters.

To split the cookie's string we need to use the variable which contains the total cookie data (cookie_stuff) and apply the split() method. Just type a dot and "split" after the string's variable name.

Now comes the fun part. In "split()'s" parentheses, type in the string you used as your demarcation flag (in quotes). This will make "crumbs" an array based on "cookie_stuff" being broken around it's "xxx"s. In our case, "crumbs" will have three array elements because "cookie_stuff" was split into three sections according to the placement of our two "xxx" demarcation flags. The "xxx"s are ignored and not included anywhere in the array.

The "crumbs" array will be as follows:

crumbs[0] = "the entered first name"
crumbs[1] = "the entered last name"
crumbs[2] = "the entered flower name"

You can see how powerful using "split()" is when reading a properly written cookie. Just one more step and we'll have variables we can "document.write()". It makes things easier to keep up with if you assign each "crumb" element to a variable that has some relevant name. Here's the scheme I used:

var cookie_stuff = unescape(document.cookie);

var crumbs = cookie_stuff.split("xxx");

var name = crumbs[0];
var lastname = crumbs[1];
var flower = crumbs[2];

Now each piece of the split string has its own variable that can be used with "document.write()" to make the dynamic second page.

You don't have to use "xxx" to demarcate the data. You can use any string you like. Just make sure it's unique and not apt to be in the regular data. I've seen ":::", "///", and "-:-" used. I have one student that uses smileys. I tend to avoid special characters. Just make sure it's unique.

Displaying The Data

The data is easy to display once you have the dynamic data stored in variables. Just use "document.write()" where appropriate in the regular HTML of the page. Here's a sample from the example:

Do all of the <script language="JavaScript">document.write(lastname)</script>s like <script language="JavaScript">document.write(flower)</script>s?

Notice how several opening and closing <script> tags are needed. Each "document.write()" must have its own <script> tags. Copy and paste are invaluable here.

It takes some practice to code in dynamic data so it looks good using "document.write()". These strings will take on the styling of the HTML and CSS that the static text around them uses.

Summary & Exercises

On most occassions, a cookie need only store varying or changeable data. Not strings with static content.

When writing only variable values to a cookie, make a string of the variables inserting "demarcation flags" between each variable.

Reading this type of cookie begins with the usual assignment of a variable to "document.cookie". Now come two more steps. First, "split()" the cookie's string along the demarcation flags. Secondly, assign variables to the array elements formed by the "split()" method.

You can now use the individual variables in a "document.write()" to present the cookie data wherever it's needed in the page. Note you could just use the array names, but variables with relevant names are easier to remember and keep up with.

Try making a page with a form that accepts values for a page's background as well as some text. Now write this data -- with demarcation flags -- to a cookie. On the page reading the cookie, have the background color data actually color the background of the page reading the cookie.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index