View Full Version : how do you save a variable when navigating between pages?

12-25-2003, 10:40 PM
I am trying to save the contents of a page so when a user navigates off of it or a photo is shown in a window I want to restore the original page to what it had on it before navigating away from it.

When the page first pops up I use onLoad to call a function to fill part of a table. The user selects one item and the same function finishes building the table using the contents in an array. The function also saves the index into the aray in a variable. I need this to be a global variable so the contents of the variable are not lost when the user pops up another page. I have tried to use onLoad and onFocus to rebuild the page but can not get it to work. The "global" variable is indexSeedless = -1; -1 says the user has not selected an item yet.

Where I use onLoad in the body I also tried to add an onFocus
<BODY onLoad = "fGrapes(indexSeedless )" onFocus = "fGrapes(indexSeedless )" >

this did not work either.

So the qustion is, how do you retain the user's selection so when the user returns to the page it can be filled in with what he was looking at before?

The code follows:


<script language="JavaScript" type="text/javascript">

iAmerica = 0;
iBeta = 1;

America = {
Name : "America",
Photo : "",
Description : "A hardy T. V. Munson variety with pleasant spicy, black current flavor. Contains lots of color in fruit and juice, but the berries are small for a table grape. Has potential for port or dry wines when grown in warmer climates.",
Synonyms : "",
Species : "Jaeger #70 (Vitis lincecumii x V. rupestris) x open pollinated.",
Uses : "Table, wine and juice.",
Color : "Black",
Berry : "Small",
Cluster : "",
Yield : "",
Hardiness : "Hardy to about -30 F. (-34 C.).",
Vigor : "",
Ripens : "",
Pruning : "Cane prune.",
Diseases : "Excellent disease resistance. Tolerates Pierce's disease.",
Comments : "Acid is high when grown in colder climates. That allows it to grow and do well clear into the South. Flowers look perfect, but need a pollinator for best set.",
WineNotes : "Potential for port or dry wines when grown in warmer regions.",
References : '<a href="references.html#Item5">5</a>, <a href="references.html#Item10">10</a>' // 5, 10

Beta = {
Name : "Beta",
Photo : "",
Description : "A very productive, very reliable, hardy grape bred by Louis Suelter in the 1800s. Tart fruit with high color content best suited for jelly. The jelly is very flavorful, very similar to Concord. Once the most planted grape in Minnesota, it is being replaced by higher quality varieties, such as Valiant, which is almost as hardy.",
Synonyms : "",
Species : "Vitis riparia x Concord.",
Uses : "Jelly",
Color : "Black",
Berry : "Small, seedy berries with sweet flesh and tart skin.",
Cluster : "Large",
Yield : "",
Hardiness : "Hardy to -50 F. (-45.5 C.).",
Vigor : "Extremely vigorous",
Ripens : "About 4 weeks before Concord.",
Pruning : "Cane prune.",
Diseases : "Disease resistant. Its disease resistance is better than Valiant.",
Comments : "In cold areas Commercial growers often plant a few vines to gauge the effects of winter damage. If Beta is damaged then almost everything else will be severely damaged.",
WineNotes : "",
References : '<a href="references.html#Item1">1</a>, <a href="references.html#Item5">5</a>, <a href="references.html#Item7">7</a>, <a href="references.html#Item10">10</a>, <a href="references.html#Item14">14</a>'

tGrapes = [ America, Beta ];
indexSeedless = -1; // global variable???

// Function to display the seedless grapes
function fGrapes(name)
vNameLst.innerHTML = "<a href='#' onClick='fGrapes(iAmerica); return false'>America</a>, <a href='#' onClick='fGrapes(iBeta); return false'>Beta</a>";
vNumLst.innerHTML = "<a href='#' onClick='fGrapes(iAmerica ); return false'> E.S 40</a>";
if (name > -1)
indexSeedless = name;
Name.innerHTML = tGrapes[name].Name;
Desc.innerHTML = "Description";
DescT.innerHTML = tGrapes[name].Description;
if (tGrapes[name].Photo != "")
Photo.innerHTML = "Photo";
PhotoT.innerHTML = tGrapes[name].Photo;
Photo.innerHTML = "";
PhotoT.innerHTML = "";
if (tGrapes[name].Synonyms != "")
Synonyms.innerHTML = "Synonyms";
SynonymsT.innerHTML = tGrapes[name].Synonyms;
Synonyms.innerHTML = "";
SynonymsT.innerHTML = "";
Species.innerHTML = "Species"; SpeciesT.innerHTML = tGrapes[name].Species;
Uses.innerHTML = "Uses"; UsesT.innerHTML = tGrapes[name].Uses;
Color.innerHTML = "Color"; ColorT.innerHTML = tGrapes[name].Color;
Berry.innerHTML = "Berry"; BerryT.innerHTML = tGrapes[name].Berry;
Cluster.innerHTML = "Cluster"; ClusterT.innerHTML = tGrapes[name].Cluster;
Yield.innerHTML = "Yield"; YieldT.innerHTML = tGrapes[name].Yield;
Hardy.innerHTML = "Hardiness"; HardyT.innerHTML = tGrapes[name].Hardiness;
Vigor.innerHTML = "Vigor"; VigorT.innerHTML = tGrapes[name].Vigor;
Ripens.innerHTML = "Ripens"; RipensT.innerHTML = tGrapes[name].Ripens;
Pruning.innerHTML = "Pruning"; PruningT.innerHTML = tGrapes[name].Pruning;
Diseases.innerHTML = "Diseases"; DiseasesT.innerHTML = tGrapes[name].Diseases;
Comments.innerHTML = "Comments"; CommentsT.innerHTML = tGrapes[name].Comments;
if (tGrapes[name].WineNotes != "")
Notes.innerHTML = "";
NotesT.innerHTML = "";
Notes.innerHTML = "Wine Notes";
NotesT.innerHTML = tGrapes[name].WineNotes;
if (tGrapes[name].References != "")
Ref.innerHTML = "References";
RefT.innerHTML = tGrapes[name].References;
Ref.innerHTML = "";
RefT.innerHTML = "";


<BODY onMousemove = "fGrapes(indexSeedless)" onLoad = "fGrapes(indexSeedless)">
<table width="100%">
<td id = "vName" bgcolor = "lime" width="8%">Name</td> <td valign="TOP" id = "vNameLst"></td>

<td id = "vNum" bgcolor = "yellow" width="8%">Number</td> <td valign="TOP" id = "vNumLst"></td>

<table bgcolor = "bisque">
<tr><td id = "Name" colspan = "2"></td></tr>
<tr><td id = "Desc" width="18% " valign="TOP"></td> <td id = "DescT"></td> </tr>
<tr><td id = "Photo" width="18% " valign="TOP"></td> <td id = "PhotoT"></td> </tr>
<tr><td id = "Synonyms" width="18% " valign="TOP"></td> <td id = "SynonymsT"></td> </tr>
<tr><td id = "Species" width="18% " valign="TOP"></td> <td id = "SpeciesT"></td> </tr>
<tr><td id = "Uses" width="18% " valign="TOP"></td> <td id = "UsesT"></td> </tr>
<tr><td id = "Color" width="18% " valign="TOP"></td> <td id = "ColorT"></td> </tr>
<tr><td id = "Berry" width="18% " valign="TOP"></td> <td id = "BerryT"></td> </tr>
<tr><td id = "Cluster" width="18% " valign="TOP"></td> <td id = "ClusterT"></td> </tr>
<tr><td id = "Yield" width="18% " valign="TOP"></td> <td id = "YieldT"></td> </tr>
<tr><td id = "Hardy" width="18% " valign="TOP"></td> <td id = "HardyT"></td> </tr>
<tr><td id = "Vigor" width="18% " valign="TOP"></td> <td id = "VigorT"></td> </tr>
<tr><td id = "Ripens" width="18% " valign="TOP"></td> <td id = "RipensT"></td> </tr>
<tr><td id = "Pruning" width="18% " valign="TOP"></td> <td id = "PruningT"></td> </tr>
<tr><td id = "Diseases" width="18% " valign="TOP"></td> <td id = "DiseasesT"></td> </tr>
<tr><td id = "Comments" width="18% " valign="TOP"></td> <td id = "CommentsT"></td> </tr>
<tr><td id = "Notes" width="18% " valign="TOP"></td> <td id = "NotesT"></td> </tr>
<tr><td id = "Ref" width="18% " valign="TOP"></td> <td id = "RefT"></td> </tr>



Thanks in advance for the help,

12-26-2003, 04:34 AM
Either you need to store it in a cookie with JavaScript, or you need to pass it as a GET parameter in the URL.

Mr J
12-26-2003, 11:12 AM
I have written a few examples of how to pass data from page to page.

See if this helps you out at


12-26-2003, 02:33 PM
Try to use cookies.:D

Mr J
12-26-2003, 04:12 PM
I have had a play with your script, I'm not too sure about this but have a look, it might put you on the right lines

12-26-2003, 07:26 PM
Wow, nice replies.

I created a cookie and got it to work then ran into an interesting problem when I tried to show grapes on multiple pages. I have five categories of grapes, each category having a separate page. I put the same code on every page. The result was that when I went from page to page the index to the array, which I am passing in the cookie, loaded the grape at the array index on the other pages. I thought the cookie was per page but it seems cookies are per site. Now I am trying to figure out how to have multiple cookies, name each for each category and then find that name in the cookie array and load the correct grape for a specific page. I'm off to cookie class to find out how to name and manage multiple cookies.

Thanks for the help,

Mr J
12-27-2003, 12:14 AM
I think all you'll have to do is give each cookie a different name

oh and sorry about this, but there is an error in my cookie script in my last post

Mr J
12-27-2003, 12:17 AM
Have a play with the files in the zip, these are what i've been experimenting with