将输入的密码与存储的密码进行比较

Question

我创建了一个表单注册，您可以在其中创建密码。然后我将输入的密码和电子邮件与存储的密码和电子邮件进行比较以成功登录。我在获取已存储电子邮件的未定义电子邮件地址时遇到问题。我确定这很简单。下面是我的代码 -

const memberSignUp = (event) => {
  let formData = {
    firstName: document.getElementById("firstName").value,
    lastName: document.getElementById("lastName").value,
    email: document.getElementById("userEmail").value,
    password: document.getElementById("userPassword").value,
  };
  localStorage.setItem("formData", JSON.stringify(formData));
  console.log(localStorage.getItem("formData"));
  event.preventDefault();
  alert("Account successfully created");
  window.location = "landing.html";
};

function clearForm() {
  document.getElementById("firstName").value = "";
  document.getElementById("lastName").value = "";
  document.getElementById("userEmail").value = "";
  document.getElementById("userPassword").value = "";
}

function memberSignIn() {
  let storedEmail = $("#storedEmail").val();
  let storedPassword = $("#storedPassword").val();
  let enteredEmail = $("#memberEmail").val();
  let enteredPassword = $("#memberPassword").val();
  console.log(storedEmail, enteredEmail);
  if (enteredEmail == storedEmail && enteredPassword == storedPassword) {
    alert("Login successful.");
    window.location = "index.html";
    return false;
  } else {
    alert("Incorrect username or password.");
    window.location = "landing.html?#";
  }
}

我的 HTML 代码如下。感谢检查。

<div class="forms-container">
  <form id="signInForm" onsubmit="return memberSignIn()">
    <div class="mb-3">
      <label for="email" class="form-label">Email address</label>
      <input
        type="email"
        class="form-control"
        id="memberEmail"
        aria-describedby="emailHelp"
        placeholder="Email"
      />
      <div id="emailHelp" class="form-text">
        We'll never share your email with anyone else.
      </div>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input
        type="password"
        class="form-control"
        id="memberPassword"
        placeholder="Password"
      />
    </div>
    <button type="submit" class="btn btn-warning">Sign In</button>
    <div class="mb-3">
      <p>
        New to Rewind?
        <a href="#" class="" target="_self" id="signUpButton"
          >Sign up now</a
        >
      </p>
    </div>
  </form>
</div>
<div class="form-group">
  <form class="row g-3" onsubmit="memberSignUp(event), clearForm()">
    <div class="col-md-6">
      <label for="firstName" class="form-label">First Name</label>
      <input
        type="text"
        name="firstName"
        class="form-control"
        id="firstName"
        placeholder="First"
      />
    </div>
    <div class="col-md-6">
      <label for="lastName" class="form-label">Last Name</label>
      <input
        type="text"
        name="lastName"
        class="form-control"
        id="lastName"
        placeholder="Last"
      />
    </div>
    <div class="col-md-6">
      <label for="email" class="form-label">Email</label>
      <input
        type="email"
        name="email"
        class="form-control"
        id="userEmail"
        placeholder="Email"
      />
    </div>
    <div class="col-md-6">
      <label for="password" class="form-label">Password</label>
      <input
        type="password"
        name="password"
        class="form-control"
        id="userPassword"
        placeholder="Submit"
      />
    </div>
    <div>
      <button type="submit" class="btn btn-warning">Submit</button>
    </div>
  </form>
</div>