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

问题描述 投票：0回答：1

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

存储信息不是问题，但是，当我尝试用我刚刚输入的信息登录时，虽然我知道信息是正确的，但它仍然向我抛出一个 "错误"，说密码和用户名不匹配。

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

我甚至尝试了错误处理，如果有一个浏览器的兼容性问题，仍然没有用。这是注册.html的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

<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.');
}

}

我花了几个小时试图重写代码，也许可以看到一些错别字或错误，但我找不到我哪里出错了！如果有人可以帮助，显示为什么它与用户名和密码不匹配将是巨大的。如果有人能帮我看看为什么它与用户名和密码不匹配的原因，那就太好了。

它应该提醒我 "你已经登录了"。

谢谢！我正在尝试制作一个功能完善的登录系统，它应该提醒我 "您已登录"。

javascript html css getelementbyid
1个回答
1
投票

你有一个错别字

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

应该是这样

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

}

对了，你的代码只能用用户名（而不是邮箱）登录，因为它是。不要忘了比较电子邮件。

0
投票

当调用store()时，那些在注册页面用来存储元素的变量(userName, userEmail等)可能会变成null.我建议在函数中获取这些变量。

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)

在你的例子中，sedicatedPassword没有 "value"，而userPwLogin有，因为userPwLogin是你的表单中的元素。

0
投票

你的代码不正确，因为你把你的本地存储变量和你的输入元素混淆了。这一行：

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

应该是：

if (userNameLogin.value === storedName && userPwLogin.value === storedPassword) {
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.