javascript - 跨 html 文件访问 javascript 变量

我正在尝试使用我的 js 文件来保存我将在我的 html 文件中使用的所有变量，以更新或检索值。我觉得很傻，因为我能够从我的 index.html 文件访问 helpers.js 变量，但不能访问我的 mainMenu.html。任何帮助将不胜感激。我正在尝试将用户的名字添加到我的 mainMenu.html。

我尝试按照此链接作为引用，但我卡住了: [ Global variables in Javascript across multiple files

我的 js 文件包含我将引用的所有变量:

'helpers.js'

var companyName = "";
var firstName = "";
var lastName ="";
var clientOrEmployee ="";
var online = "";
var offline = "";



function setFirstName(val){
firstName = val;
}

function getFirstName(){
 return firstName;

}

我的 html 文件可以正常工作并充当登录页面。它表明信息输入正确(1 分匹配)，然后显示公司、用户状态、用户名字和姓氏，然后显示 helpers.js 文件引用的名字，然后是他们拥有多少在线和离线信息。

'index.html'

<!doctype html>
<head>
 <meta charset="utf-8">
 <script type="text/javascript" src="helpers.js"></script>
  <title>X2nSat</title>

    <style>
      .error {color: #FFFFFF;}
    </style>
  </head>
  <meta name="description" content="title">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>


<body bgcolor="FFFFFF">
 <link rel="stylesheet" href="login.css"  />
    <div id="wrapper">
     <br><br><br>
      <div id="main">

       <center>
        <form name="myform">
          <br>

      <center>
    <img src="logo.png" />
     </center>
          <br>
          <center><h1>Login</h1></center>
          <br>


              <strong>Email: </strong>
              <br>
              <input type="text" name="email">
                     <span class="error">
                       <br>
                       <?php echo $emailErr;?>
                     </span>
                     <br><br>
              <strong>Password: </strong>
              <br>
              <input type="password" name="password">
                     <span class="error">
                       <br>
                       <?php echo $nameErr;?>
                      </span>
                 <br><br>
         <input type="button" value="Log In" name="Submit" onClick="validate()">
        </form>

        <br><br><br>
   </center>
  </div> <!-- main -->

  <script type="text/javascript" >
    Parse.initialize("secretID", "secretID");


    function validate() {

    var em = document.myform.email.value;
    var pw = document.myform.password.value;
    var valid = false;
/* =========
Query for finding email, password, company name, first name, last name and client or employee status   ================  */

    var Clients = Parse.Object.extend("Clients");
    var query = new Parse.Query(Clients);
    query.equalTo("email", em);
    query.equalTo("password",pw);
    query.find({
    success: function(results) {
    if(results.length==0){
      alert("Error: The information you have entered is incorrect. Please try again.");
    }
   else{
    alert("Successfully retrieved " + results.length + " scores.");
    }

    // Do something with the returned Parse.Object values

 for (var i = 0; i < results.length; i++) {
                var object = results[i];
                var company = object.get('ComapnyName');
                var firstname = object.get('firstName');
                var lastname = object.get('lastName')
                var clientoremployee = object.get('client_or_employee');

                companyName = company;
                firstName = firstname;
                lastName = lastname;
                clientOrEmployee = clientoremployee;



                alert(company+ " "+clientoremployee + ' : ' + firstname+ ' ' + lastname);


        }//for loop end
 //start

alert(getFirstName()); //this is working 100%!!!!!!

/*=====
Query to find the number of online of offline sites
=====*/

var statusInfo = Parse.Object.extend("ClientCompanyInfo");
var query2 = new Parse.Query(statusInfo);
query2.equalTo("CompanyName", companyName);
query2.find({
  success: function(object) {
    // Successfully retrieved the object.

   var onlineCount = 0;
   var offlineCount = 0;
for (var i = 0; i < object.length; i++) {
 var site = object[i];
      var status = site.get('site_status');
      if(status == "Online"){
        onlineCount++;
      }
      if(status == "Offline"){
       offlineCount++;
      }
     // alert(site.get('playerName'));
    }//end for loop

   online = onlineCount;
   offline = offlineCount;

   alert("Success: object length ="+object.length);
   alert("Online Sites: "+ onlineCount +" Offline: "+offlineCount);
   window.location.href = "mainMenu.html";

  },
error: function(error) {
    alert("Error: " + error.code + " " + error.message);
  }
});
       //end

       },//end if success
       error: function(error) {
       alert("Error: " + error.code + " " + error.message);
       }//end error
    }); //find
 }//validate

  </script>
</div><!-- wrapper -->


  <!-- ============ FOOTER SECTION ============== -->

    <br><br><br>

    <div id="footer">

      <div style="position:relative; bottom:10px; text-align:center; width: 90%; margin:0 auto; height:30px; border:1px so\   
lid black;" >
    <id= "footer">
          Copyright &#169 Inc.

      </div>
    </div>

</body>

</html>

loginscreen

问题:到目前为止，一切都很好......然后我尝试在我的 mainMenu.html 文件中引用 helpers.js 文件，并给我“未定义”的值作为用户的名字。这怎么可能？我错过了什么？？？

'mainMenu.html'

<!doctype html>
<head>
 <meta charset="utf-8">
 <script type="text/javascript" src="helpers.js"></script>
<!--<script src="index.html"></script>-->
  <title>X2nSat</title>

    <style>
      .error {color: #FFFFFF;}
    </style>
  </head>
  <meta name="description" content="title">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.19.min.js"></script>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0" bgcolor="#FFFFFF" ><tr>


<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="30px" valign="top" bgcolor="FFFFFF">

  <link rel="stylesheet" href="mainMenu.css"  />
  <div id="wrapper">

    <td style="vertical-align:middle" align="left">
      <div id="cssmenu">
        <ul>
          <li class="active"><a href="#"><span><center>Home</center></span></a></li>
          <li><a href="#"><span><center>Sites</center></span></a></li>

    <li><a href="#"><span><center>Usage</center></span></a></li>
          <li><a href="#"><span><center>Contact</center></span></a></li>
          <li><a href="#"><span><center>Log Out</center></span></a></li>
        </ul>
      </div>

</td>


<!-- ============ RIGHT COLUMN (CONTENT) ============== -->

<td width="81%" valign="top" bgcolor="#FFFFFF">

    <center>
      <img src="x2nsatLogo.png" />
    </center>

<h2><center>Site Report</center></h2>


<p>Welcome
  <script type="text/javascript" >
    Parse.initialize("secretID", "secretID");
    getFirstName();


  </script>
</p>


</div><!-- wrapper -->


</table>

</body>

</html>

mainmenuscrren

谁能帮我弄清楚为什么这个文件很难访问 helpers.js getFirstName() 函数？

先谢谢了!!!!!!

附言如果您需要我澄清任何事情，请告诉我!!!!

最佳答案

那是因为您的 JavaScript 变量状态不会跨页面保存。每次加载页面时，helpers.js 中的所有内容都从顶部开始，无需了解之前的页面加载或浏览器中的其他页面。

如果您想跨页面传递值，请使用 sessionStorage(对于现代浏览器)或使用 cookie。

如果您使用的是桌面应用程序，则可以使用数据库框架，例如 NeDB .语法类似于 Mongo，它保存到 .db 文件。

关于javascript - 跨 html 文件访问 javascript 变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25314611/

javascript - 跨 html 文件访问 javascript 变量

上一篇：html - 如何使用 HTML 或 CSS 缩进

下一篇：javascript - 将 JQuery 函数更改为 AngularJS