	free hosting image hosting hosting reseller online album e-shop famous people

Page Redirect Using Cookies

This script is based on one I found at The Javascript Source.

It allows visitors to your site to set their own default page.

A cookie is used to store the user's selection.

After the selection is made and the Submit button is clicked, the new default page is loaded.

If no selection has been made, the options page is reloaded.

With each visit, the selected deault page will continue to be loaded until the cookie expires, or if it is deleted manually.

In this example, the cookie is set to expire after one year.

Compatability

All cookie-enabled browsers.

Try It Out

Open test page

After selecting a default page, you may wish to experiment with other options.

To do that, you'll have to delete the cookie first:

Delete Cookie

Now open the test page again - the option page is back.

Cut-and-Paste

Paste the following into the head section of your page:

<SCRIPT LANGUAGE="JavaScript">      </script>

Now add this to your body section:

<center> <form> <table border=1> <tr> <td> <table bgcolor=#000077 width=380 cellpadding=20 cellspacing=0> <tr> <td colspan=2 align=center> <b>Choose your preferred start page:</b> </td> </tr> <tr> <td align=right width=30%> <input type=radio name="frames" onClick="SetCookie('page', this.name, exp);"> <br> <input type=radio name="ebutton" onClick="SetCookie('page', this.name, exp);"> <br> <input type=radio name="test" onClick="SetCookie('page', this.name, exp);"> <br> <input type=radio name="music" onClick="SetCookie('page', this.name, exp);"> </td> <td> framesindex.html <br> E-Mail Button <br> Test Page <br> DHTML Media Player </td> </tr> <tr> <td colspan=2 align=center> <input type="button" value="s u b m i t" onclick="window.location='cookie_test.html'"> </td> </tr> </table> </td> </tr> </table> </form> </center>

In both sections, simply modify the urls and associated information to suit.

How It Works

1. The Cookie Functions

Cookie handling is done by 4 functions:

GetCookie
SetCookie
DeleteCookie
getCookieVal

The first 3 are self-explanatory, but the function getCookieVal is a little less obvious.

A single cookie can hold several items of information when sent from one page.

These are stored in a cookie array.

Therefore, the function GetCookie needs to know which item is required.

So it calls the function getCookieVal to find that item - in this instance, the name parameter.

2. Setting the Cookie

The table on the test page uses radio buttons to select the various options:

<input type=radio name="frames"
 onClick="SetCookie('page', this.name, exp);"> Frames Page

where:

page is the name of the cookie
this.name is the value assigned to it - eg: frames
exp is the current date (for expiry setting)

When the desired option is selected, the cookie is set.

For example, if you choose the Frames Page, the value frames is stored in the cookie called page.

When you click the Submit button:

the cookie value is read
the selected page is loaded in the same window.

To change the expiry date of the cookie, modify this line:

var expDays = 365;

3. The Page Redirection Process

When the cookie is read, its value is stored in the variable defpage:

var defpage = GetCookie('page');

A switch routine is then used to determine the name of the default page:

if (defpage != null) {

switch (defpage) {

case 'frames' : 	url = 'framesindex.html';
  break;
case 'ebutton' : 	url = 'emailbutton.html'; 
  break;
case 'test' : url = 'testpage.html';
  break;
case 'music' : url = 'wma2.html';
  break;
}

The page name is then assigned to the variable url.

For example, if the name is test, testpage.html is loaded.

If the name is music, wma2.html is loaded. And so on.

If no default page has been selected, the original options page is displayed.

The actual loading is done by the final line:

window.location.href = url;

4. Deleting The Cookie

You may wish to provide an option somewhere on your site for deleting the cookie.

This will allow the surfer to reset the default page option.

To do that, use this script in the head section of some page:

<script language="JavaScript">  </script>

And use this for the link on that page:

<a href="javascript:DeleteCookie('page')">Delete Cookie</a>