如何在我在HTML文件中编写的脚本中访问JavaScript文件中的变量？

Question

So, I'm making a super basic (and also not secure, because I'm just playing around right now) login system that displays different values for premade graphs based on who you are. I'm accessing the data for the graphs from a JSON with an array of objects that contain things like username, password, number of students, number of students that are boys, girls, etc. I want to have an ID variable that is set in my login page when the person logs in with credentials that match one of the objects' username and password in my JSON file. (the ID would be the index of whatever object the credentials matched). When I make the graphs in my HTML file using chart js, I'm opening the JSON file and accessing one of its objects by that ID and accessing its contents that way. I'm struggling to find a way to reference this ID that is in my JavaScript file in my HTML code "scriptlet", if that's what it is called. Also, I DID try to include the JavaScript file in my html file, but I keep getting errors when I try to reference it in the html how I have in my snippet. Here's a sample of my code:

 var objectID; //this is the ID I'm talking about in my question function clickedLoginButton(){ var script = document.createElement('script'); script.src = 'jquery-2.1.4.min.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); var user = document.getElementById('username'); //inputted username var pass = document.getElementById('password'); //inputted password var passed = false; $.getJSON('data.json', function(data){ console.log("Length: " + data.length) i = 0; do{ console.log(data[i].login); if(user.value == data[i].login && pass.value == data[i].pass){ objectID = i; window.open("http://localhost/loggedIn.html", "_self", true); console.log("pass"); return; } i++; } while(i != data.length); if(passed == false){ window.open("http://localhost/loginFailed.html", "_self", true); objectID = 999999999; console.log("failed"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> //This is where I want to use the object ID var numPlayed; var numLazy; $.getJSON('data.json', function(data){ var chartData = [ { value: data[objectID].numStudents-data[objectID].numStudentsPlayed, color: "dimgray", highlight: "gray", label: "lazy" }, { value: data[objectID].numStudentsPlayed, color: "skyblue", highlight: "powderblue", label: "played" } ]; var ctx = document.getElementById("pieCanvas").getContext("2d"); var piechart = new Chart(ctx).Pie(chartData); }); </script> 

Answer 1

I figured it out! You have to use cookies to access the ID for the user, and here's a tutorial for that:

http://www.w3schools.com/js/js_cookies.asp

Answer 2

The problem is that once you set the objectID variable, you navigate away from the page. Once you navigated away from the page, you can no longer access JS variables defined in the previous page.

To go around this problem, you can store the value of the objectID so that the next page can access it again. You can do this using several methods.

Using query parameters of the next page.

When redirecting to the logged in page, you can specify the objectID.

window.open("http://localhost/loggedIn.html?objectId="+objectID, "_self", true);

Then, in the script in the loggedIn page, you can access the objectID using window.location.search

console.log(window.location.search); // outputs ?objectId=2343

Using localStorage

You can use localStorage to store the value of objectID. localStorage.setItem('objectID', objectID) then extract it in the logged in page using localStorage.getItem('objectID') .

Using Cookies

As you mentioned above, you can use cookies to store and extract the value of objectID. The disadvantage of this is that it is sent in all subsequent requests to the server.