JavaScript：Login/Register 与 localStorage

Question

嘿，我知道这可能是一个简单的问题，但我在 JavaScript 中遇到了 Login/Register 的问题。我通过 localStorage 存储用户数据，当我尝试登录时，他总是 returns 我的警告消息，输入的数据是错误的。

编辑：存储名称未定义但密码未定义。还是没看懂..

编辑：问题已解决。感谢汉克！解决方案在评论中。

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Learning JavaScript</title>
    </head>
    <body>
        <form id="register-form"> 
            <input id="name" type="text" placeholder="Name" value=""/>
            <input id="pw" type="password" placeholder="Password" value=""/>
            <input id="rgstr_btn" type="submit" value="get Account" onClick="store()"/> 
        </form>

        <form id="login-form"> 
            <input id="userName" type="text" placeholder="Enter Username" value=""/>
            <input id="userPw" type="password" placeholder="Enter Password" value=""/>
            <input id="login_btn" type="submit" value="Login" onClick="check()"/> 
       </form>

    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" language="javascript" src="login.js"></script>

    </body>
</html>

这是我的 JavaScript 代码：

// Name and Password from the register-form
var name = document.getElementById('name');
var pw = document.getElementById('pw');

// storing input from register-form
function store() {
    localStorage.setItem('name', name.value);
    localStorage.setItem('pw', pw.value);
}

// check if stored data from register-form is equal to entered data in the   login-form
function check() {

    // stored data from the register-form
    var storedName = localStorage.getItem('name');
    var storedPw = localStorage.getItem('pw');

    // entered data from the login-form
    var userName = document.getElementById('userName');
    var userPw = document.getElementById('userPw');

    // check if stored data from register-form is equal to data from login form
    if(userName.value !== storedName || userPw.value !== storedPw) {
        alert('ERROR');
    }else {
        alert('You are loged in.');
    }
}

Answer 1

您有 2 个问题： 1. "name" 是一个保留字，它会对你产生影响，将其更改为其他名称，例如 name1 或 nm 之类的。 2.不要用!==，!=就可以了，反正你逻辑不对，改成这样：

if(userName.value == storedName && userPw.value == storedPw) {
        alert('You are loged in.');
    }else {
        alert('ERROR.');
    }

但是，是的，我知道你只是在练习，但实际上并没有在客户端保存用户名和密码。

Answer 2

// entered data from the login-form
var userName=document.getElementById('userName');
var userPw = document.getElementById('userPw');

这就是您遇到问题的地方。您想要将输入的值与 localStorage 数据进行比较。这很好，但应该是这样的：

var userName = document.getElementById('userName').value;
var userPw = document.getElementById('userPw').value;

这是获取输入字段值的正确方法。

Answer 3

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>logSign</title>
</head>

<body>
  <form id="signup-form">
    <input id="name1" type="text" placeholder="Username" value="" required>
    <input id="pass1" type="password" placeholder="Password" value="" required>
    <input id="signup_btn" type="submit" value="Signup">
  </form>

  <form id="login-form">
    <input id="name2" type="text" placeholder="Username" value="" required>
    <input id="pass2" type="password" placeholder="Password" value="" required>
    <input id="login_btn" type="submit" value="Login">
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#signup-form").submit(function () {
        var nm1 = $("#name1").val();
        var ps1 = $("#pass1").val();
        localStorage.setItem("n1", nm1);
        localStorage.setItem("p1", ps1);

      });

      $("#login-form").submit(function () {
        var enteredName = $("#name2").val();
        var enteredPass = $("#pass2").val();

        var storedName = localStorage.getItem("n1");
        var storedPass = localStorage.getItem("p1");

        if (enteredName == storedName && enteredPass == storedPass) {
          alert("You are logged in!");
        }
        else {
          alert("Username and Password do not match!");
        }

      });

    });
  </script>
</body>

</html>

JavaScript：Login/Register 与 localStorage

JavaScript: Login/Register with localStorage

html

javascript

local-storage