信息未保存到本地存储

Question

Java Script

function getid() {
    'use strict';
    var pass1, pass2;
    pass1 = document.getElementById("pass1").value;
    pass2 = document.getElementById("pass2").value;
    if (pass1 !== pass2) {
        window.alert("Passwords Do not match");
        document.getElementById("pass1").value = "";
        document.getElementById("pass2").value = "";

    } else {
        logininfo[index] = {
            fname: document.getElementsByName("firstName").value,
            lname: document.getElementsByName("lastNane").value,
            student: document.getElementsByName("studentn").value,
            password: document.getElementsByName("password2").value
        };
        index++;
        localStorage.setItem("login", JSON.stringify(logininfo));
        window.location = "login.html";
    }
}

HTML

<form>
  <div class="login-card">
    <img src="rsz_logo.gif" alt="North Park Logo" >

    <h1>Register</h1><br>
    <input type="text" name="firstName" placeholder="First Name" required>
    <input type="text" name="lastName" placeholder="Last Name" required>
    <input type="text" name="studentn" placeholder="Student Number" required>
    <input type="password" name="pass1" placeholder="Password" required>
    <input type="password" name="pass2" placeholder="Re-type Password" required>

    <input type="submit" name="login" class="login login-submit" value="Register" onclick="getid()">

    <div class="login-help">
      <a href="login.html">Back to Login</a>
    </div>
  </div>
</form>

What I'm trying to do here is password validation to see if pass1 = pass2, if they are equal then proceed to the login page and store the information into the local storage but if not then clear the password fields for the person to retype the passwords.

The information doesn't save into the local storage. After I click the submit button the page refreshes and the information is viable in the url but not in the local storage. I am trying to stick to HTML and Javascript.

Answer 1

You are missing the ID tag needed to do this:

<input type="password" name="pass1" id="pass1" placeholder="Password" required>
<input type="password" name="pass2" id="pass2" placeholder="Re-type Password" required>

This is because you are using:

document.getElementById("pass1").value = "";
document.getElementById("pass2").value = "";

With no ID, there's nothing for that function to grab from.

Answer 2

logininfo = {
    fname: document.getElementsByName("firstName").value,
    lname: document.getElementsByName("lastNane").value,
    student: document.getElementsByName("studentn").value,
    password: document.getElementsByName("password2").value
};
localStorage.setItem("login", JSON.stringify(logininfo));