从本地存储中检索数据 - 键值对显然不匹配（错误）

Question

我正在尝试制作一个功能性的登录和注册页面（我知道在现实生活中我需要将登录信息存储在数据库中，但现在我想查看我的页面 "working"）。我创建了两个页面，其中一个用于注册，一个用于登录。我还有两个 JS 文件，一个用于本地存储输入值 (registerDetails.js)，另一个用于在登录期间检索这些值 (login.js)。

存储信息不是问题，但是，当我尝试使用我刚刚输入的信息登录并且知道它是正确的时，它仍然向我抛出 "Error" 说密码和用户名不正确匹配，即使我知道它们确实匹配。

评论中的解决方案 - 变量的混合

如果浏览器兼容性有问题，我什至尝试过错误处理，但仍然无济于事。这是 HTML for register.html:

<form class="form-horizontal">
  <fieldset>
    <div id="legend">
      <legend>
        Register or <a class="login-link" href="login.html">Login</a>
      </legend>
      <p>All fileds marked with * are required.</p>
    </div>
    <hr />
    <div class="control-group">
      <!-- Username -->
      <label class="control-label" for="username"><span class="asterisk">*</span> Username</label>
      <div class="controls">
        <input type="text" id="username" name="username" placeholder="Any letters or numbers without spaces"
          class="input-xlarge" />
      </div>
      <br />
    </div>

    <div class="control-group">
      <!-- E-mail -->
      <label class="control-label" for="email"><span class="asterisk">*</span> E-mail</label>
      <div class="controls">
        <input type="text" id="email" name="email" placeholder="Enter your email here" class="input-xlarge" />
      </div>
      <br />
    </div>

    <div class="control-group">
      <!-- Password-->
      <label class="control-label" for="password"><span class="asterisk">*</span> Password</label>
      <div class="controls">
        <input type="password" id="password" name="password" placeholder="Password of atleast 4 characters"
          class="input-xlarge" />
      </div>
      <br />
    </div>

    <div class="control-group">
      <!-- Password -->
      <label class="control-label" for="password_confirm"><span class="asterisk">*</span> Confirm Password</label>
      <div class="controls">
        <input type="password" id="password_confirm" name="password_confirm" placeholder="Please confirm password"
          class="input-xlarge" />
      </div>
      <br />
    </div>

    <div class="control-group">
      <!-- Button -->
      <div class="controls">
        <button type="submit" id="register" class="btn btn-success" onClick="store()">
          Register
        </button>
      </div>
    </div>
  </fieldset>
</form>

这是我的 HTML login.html:

<form class="form-horizontal">
    <fieldset>
      <div id="legend">
        <legend>
          Login or <a class="login-link" href="register.html">Register</a>
        </legend>
      </div>
      <hr />
      <div class="control-group">
        <!-- Username or Email-->
        <label class="control-label" for="username">Username or Email</label>
        <div class="controls">
          <input type="text" id="usernameEmail" name="usernameEmail" placeholder="Enter your email or username"
            class="input-xlarge" />
        </div>
        <br />
      </div>

      <div class="control-group">
        <!-- Password-->
        <label class="control-label" for="password">Password</label>
        <div class="controls">
          <input type="password" id="passwordLogin" name="password" placeholder="Enter your password"
            class="input-xlarge" />
        </div>
        <br />
      </div>

      <div class="control-group">
        <!-- Button -->
        <div class="controls">
          <button class="btn btn-success" type="submit" onclick="check()">Login</button>
        </div>
      </div>
    </fieldset>
  </form>

我的注册 JS 工作正常，浏览器提示我保存凭据以备后用... 这是在这里：

// Getting details from the registration form to later store their values

var userName = document.getElementById('username');
var userEmail = document.getElementById('email');
var password = document.getElementById('password');
var passwordConfirm = document.getElementById('password_confirm');

// Locally storing input value from register-form
function store() {
    if (typeof (Storage) !== "undefined") {
        localStorage.setItem('name', userName.value);
        localStorage.setItem('email', userEmail.value);
        localStorage.setItem('password', password.value);
        localStorage.setItem('password_confirmation', passwordConfirm.value);
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
}

但是，即使我确定用户名和密码匹配，我的登录页面也会抛出错误警报。

// 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 storedEmail = localStorage.getItem('email');
var storedPassword = localStorage.getItem('password');


// entered data from the login-form
var userNameLogin = document.getElementById('usernameEmail');
var userPwLogin = document.getElementById('passwordLogin');

// check if stored data from register-form is equal to data from login form

if (userNameLogin.value == storedName && storedPassword.value == userPwLogin) {
    alert('You are loged in.');
} else {
    alert('ERROR.');
}

}

我花了几个小时试图重写代码，可能会看到一些拼写错误或错误，但我找不到哪里出错了！如果有人可以帮忙说明它与用户名和密码不匹配的原因，那就太好了。

它应该提醒我 "You are logged in."

谢谢！

Answer 1

当调用 store() 时，用于在注册页面（用户名、用户电子邮件等）存储元素的变量可能为空。我建议将它们放在函数中：

function store() {
    var userName = document.getElementById('username');
    var userEmail = document.getElementById('email');
    var password = document.getElementById('password');
    var passwordConfirm = document.getElementById('password_confirm');
    if (typeof (Storage) !== "undefined") {
        localStorage.setItem('name', userName.value);
        localStorage.setItem('email', userEmail.value);
        localStorage.setItem('password', password.value);
        localStorage.setItem('password_confirmation', passwordConfirm.value);
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
    }
}

但解决方案在于这一行：

if (userNameLogin.value == storedName && storedPassword.value == userPwLogin)

在你的情况下，storedPassword 没有 "value" 而 userPwLogin 有，因为 userPwLogin 是你表单上的元素

Answer 2

您的代码无法正常工作，因为您混淆了本地存储变量和输入元素。这一行：

if (userNameLogin.value === storedName && storedPassword.value === userPwLogin) {

应该是：

if (userNameLogin.value === storedName && userPwLogin.value === storedPassword) {

Answer 3

你打错了

if (userNameLogin.value == storedName && storedPassword.value == userPwLogin) {
                                         ^^Here
}

应该是这个

if (userNameLogin.value == storedName && userPwLogin.value == storedPassword ) {

}

顺便说一下，您的代码将仅使用用户名（而不是电子邮件）原样登录。不要忘记也比较电子邮件。

从本地存储中检索数据 - 键值对显然不匹配（错误）

Retrieving Data from Local Storage - key value pairs apparently don't match (error)

html

javascript

css

getelementbyid