I am new to JavaScript and this site, and I am trying to make a mock up username and password log in and creator. For now, the username and password creator is limited to pre-made username and passwords. The idea is to be able, in the end, to create a username and password on one page then to send that array of usernames and passwords to the log in page. I know the security is bad and I won't use this in a real website, but aside from that, I can't get the code to run. The code outputs username and password text boxes to put in values, but when you click the button to posses them nothing happens. What did I do wrong? Thanks for helping!
The page where the pre-made usernames and passwords are declared:
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem( "username1", ["bob", "sam"]);
sessionStorage.setItem( "password1", ["lol", "jk"]);
</script>
</head>
<body>
</body>
</html>
The place where the username and password arrays are sent and processed in the log in:
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.getElementById("username").value
var pw = document.getElementById("pword").value
var valid = false;
var unArray = sessionStorage.getItem("username1");
var pwArray = sessionStorage.getItem("password1");
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<!--this-->
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<!--here-->
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" id="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" id="pword">
<input type="button" value="Check In" name="Submit" onclick="validate()">
</p>
</form>
<!--to here-->
</body>
</html>
-
Are missing semi colons at end of first 2 lines of validate an issue?deepakborania– deepakborania2014年11月26日 19:25:05 +00:00Commented Nov 26, 2014 at 19:25
-
@deepakborania — Not one relevant to the problem.Quentin– Quentin2014年11月26日 19:31:58 +00:00Commented Nov 26, 2014 at 19:31
-
how do i use the JSON? will it work on my browser?dom rit– dom rit2014年11月26日 19:44:30 +00:00Commented Nov 26, 2014 at 19:44
1 Answer 1
sessionStorage can only store strings. You are storing the stringified versions of the arrays, and then looping over the characters in them when you pull them back out.
Serialise the data to JSON before storing it, and parse it with a JSON parser when you read it back.