Setting a global variable for jquery to carry accross mutiple pages

Question

Ok this is what I need to do. Not real sure how to do it. I have a php page running index.php is my main page that loads and brings in menu.php and a few other sub files. So here is my problem. I have a drop down menu written in java and then I also have a Jquery script linked in to generate a title for the page. Whats happening is when I click the link in the menu its showing the title for a minute and then vanishes because its going to a new page. If I add a return false its stops and works, but doesn't forward you to the new page of course. So here is my problem. I need to set a variable im assuming or something to hold that value of what is clicked and take it to the new page, which i'm not sure how to do. Here is my menu code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>


  <link rel="stylesheet" type="text/css" href="main.css" />
  <link rel="stylesheet" type="text/css" href="css/default.css">
  <link rel="stylesheet" type="text/css" href="css/css-slider.css">
  <script type="text/javascript" src="Scripts/jquery-1.7.1.js"></script>
    <script src="css/active.js" type="text/javascript">
  </script> 
    <script src="css/drop1.js" type="text/javascript">
  </script> 

  </script>


<!--Main Navigation Start -->

  <div id="nav" class="nav">
  <ul id="sddm">
  <li><a class="navigation" value="home" id="Home" href="index.php" onMouseOver="mopen('m1')" onMouseOut="mclosetime()">Home</a>
  <div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li><a class="navigation" id="Station History" href="station_history.php" onMouseOver="mopen('m2')" onMouseOut="mclosetime()">Station History</a>
  <div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" id="Apparatus" href="Apparatus.php" onMouseOver="mopen('m3')" onMouseOut="mclosetime()">Apparatus</a>
  <div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" id="Truck History" href="truck_history.php">Truck History</a> 
  </div>
  </li>
  <li>
  <a class="navigation" id="Photo Gallery" href="photos.php" onMouseOver="mopen('m4')" onMouseOut="mclosetime()">Photos</a>
  <div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" id="News & Events" href="news_events.php" onMouseOver="mopen('m5')" onMouseOut="mclosetime()">News & Events</a>
  <div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" id="Station Members" href="Station_members.php" onMouseOver="mopen('m6')" onMouseOut="mclosetime()">Station Members</a>
  <div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  </div>
  </li>
  <li>
  <a class="navigation" id="Education" href="education.php" onMouseOver="mopen('m7')" onMouseOut="mclosetime()">Education</a>
  <div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> 
  <a class="navigation" id="Station Tours" href="">Station Tours</a>
  <a class="navigation" id="Fire Extinguisher" href="">Fire Extinguisher</a>
  <a class="navigation" id="First Aid & CPR" href="">First Aid & CPR</a>
  <a class="navigation" id="Smoke Alarms" href="">Smoke Alarms</a> 
  </div>
  </li>
  <li>
  <a class="navigation" id="Contact Us" href="contactus.php" onMouseOver="mopen('m8')" onMouseOut="mclosetime()">Contact Us</a>
  <div id="m8" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()"> </div>
  </li>
  </ul>
  </div>
  </div>

</body>
</html>

<!DOCTYPE html>

Here is my Jquery

//navigation 

$(document).ready(function () {

    //var mname = ($(this).attr('id'));
    $("a.navigation").click(function () {
        //alert($(this).attr('id'));
        $("span#title").html($(this).attr('id'));


    })
});

and here is my drop down

      <!--
  var timeout         = 500;
  var closetimer    = 0;
  var ddmenuitem      = 0;

// open hidden layer
function mopen(id)
{ 
  // cancel close timer
  mcancelclosetime();

  // close old layer
  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

  // get new layer and show it
  ddmenuitem = document.getElementById(id);
  ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
  if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
  closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
  if(closetimer)
  {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

// close layer when click-out
document.onclick = mclose; 
// -->

I am completely stumpped for some reason on how to do this and really would appreciate the help.

variables are lost when the page reloads, you need cookies or local storage. — adeneo, Mar 22 '13 at 00:38
you could set the value in a session or cookie though for a session based solution, you'd have to send the variable to the server — Brad, Mar 22 '13 at 00:39
Thats what I thought but how would I go about setting up a local storage? I'm not familiar with that command. — dkrider471, Mar 22 '13 at 00:41
Possible duplicate: [Counter variable does not persist when loading a new page](http://stackoverflow.com/questions/15459933/counter-variable-does-not-persist-when-loading-a-new-page/) — Boaz, Mar 22 '13 at 00:41
`I have a drop down menu written in java` Are you called dropdown menu writen in javascript `Java`?? — WooCaSh, Mar 22 '13 at 01:09

jfriend00 · Answer 1 · 2013-03-22T01:05:35.217

Global variables last only for the lifetime of a given page so they will not last across multiple pages. So, to pass data from one page to another, you have to store the data somewhere in the browser or server so it can be retrieved by subsequent pages.

Your options for storing or passing the data in the browser are:

Store the data in a cookie and then retrieve it from the cookie on subsequent pages.
Store the data in local storage and then retrieve from local storage on subsequent pages.
When going to the next page, encode the data in the URL you are going to (either as a query parameter or as a hash value and then retrieve that data from the URL with javascript in the next page.

Options 1 and 2 are best for data that lots of pages need to access. Cookies are supported in all versions of all browsers (though occasionally users will block them). Local storage is a little cleaner API and is supported in all modern browsers, but is not supported in some older browsers. The amount of data that can be stored per domain is more limited in cookies than local storage.

Keep in mind that options 1 and 2 only work for pages in the same domain. Cookies and local storage cannot be accessed outside the domain that stored the data.

See this article on MDN for reading/writing cookies.

See this article on MDN for reading/write local storage, including a compatibility library that falls back to cookies if local storage is not available.

score 0 · Answer 2 · answered Mar 22 '13 at 00:42

Use Cookies! Here is some Javascript:

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}
function getCookie(c_name){
    var i,x,y,ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++)
    {
      x = ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
      x = x.replace(/^\s+|\s+$/g,"");
      if (x == c_name)
        {
        return unescape(y);
        }
    }

}

I would rather not do the cookies if I don't have to, but the url would prob be the way Id like to go if I can pass the id name somehow? I'm not real sure how to do this? Anyone got any suggestions? — dkrider471, Mar 22 '13 at 03:10

Setting a global variable for jquery to carry accross mutiple pages

2 Answers2