Question

我创建了一个将用户数据保存在本地存储上的网站。它运作良好，但我写了一个if else语句来处理注册现有电子邮件的人。我不知道代码为什么不起作用。我创建了一个变量duplicateUsers，后跟if else语句。下面是HTML CSS和javascript代码。

javascript文件执行以下操作 1）通过单击注册按钮将用户添加到本地存储 2）检查不完整的细节 3）检查重复用户并根据响应执行操作（不起作用）

这里的问题是，无论用户是否已经存在，它仍然会将用户添加到本地存储，而不是返回说明用户已存在的警报。

＆＃13;

var signUpBtn = document.querySelector('#signUp');
var signUpOver = document.querySelector('.signup__overlay');

var signInBtn = document.querySelector('#signIn');
var signInOver = document.querySelector('.signin__overlay');

var fullname = document.querySelector('#name');
var email = document.querySelector('#email');
var password = document.querySelector('#password');
var age = document.querySelector('#age');
var occupation = document.querySelector('#occupation');
var address = document.querySelector('#address');

var signupSubmitClicked = document.querySelector('#signupClicked'); 





signupSubmitClicked.addEventListener('click', () => {
  if (fullname.value=="" || email.value=="" || password.value=="" || age.value=="" || occupation.value=="" || address.value=="") {
    alert("incomplete datails, please fill up everything")
  } else {
    alert("item created")
    addUser(fullname, email, password, age,  occupation, address);
  }
});


var addUser = (fullname, email, password, age,  occupation, address) => {
  var users = [];
  const user = {
    fullname: fullname.value,
    email: email.value,
    password: password.value,
    age: age.value,
    occupation: occupation.value,
    address: address.value
  };


  try {
    var existingUsers = localStorage.getItem('userData');
    users = JSON.parse(existingUsers) || [];
  } catch (e) {

  }

  var duplicateUsers = users.filter(user => user.email === email);
  
  if (duplicateUsers.length === 0) {
    users.push(user);
    localStorage.setItem('userData', JSON.stringify(users));
  } else {
    alert("user already exists");
  }

};



/*************
signup popup
*************/
signUpBtn.addEventListener('click', () => {
  signUpOver.style.display = 'block';
});

signUpOver.addEventListener('click', () => {
  if(event.target == signUpOver){
    signUpOver.style.display = "none";
  }
});
/*************
signup popup
*************/


/*************
signin popup
*************/
signInBtn.addEventListener('click', () => {
  signInOver.style.display = 'block';
});

signInOver.addEventListener('click', () => {
  if(event.target == signInOver){
    signInOver.style.display = "none";
  }
});
/*************
signin popup
*************/
/** the end */

＆＃13;

body {
  width: 100%;
  margin: 0;
  background-color: #F8F9F9;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

#mainPage,
#userPage {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

#userPage {
  display: none;
}

/********************
overlay
********************/
.signup__overlay {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}

.signup__content{
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: #ffffff;
  opacity: 1;
  margin: 64px auto;
  padding: 20px;
}

.signin__overlay {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}

.signin__content{
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: #ffffff;
  opacity: 1;
  margin: 64px auto;
  padding: 20px;
}


/********************
overlay ending
********************/

.headerMain {
  background-color: #000;
  color: #fff;
  width: 100%;
  margin-bottom: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.headerUser {
  background-color: #000;
  color: #fff;
  width: 100%;
  margin-bottom: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.upButton {
  margin-bottom: 20px;
}

.upButton, .inButton {
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  background-color: #239B56;
  border: #239B56;
  color: snow;
}

label {
  padding-top: 20px;
}

label,
input {
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>User system</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>

  <div id="mainPage">

      <div class="signup__overlay">
        <div class="signup__content">
          <form>
            <label for="name">Full Name</label>
            <input required type="text" id="name" name="name">

            <label for="email">Email</label>
            <input required type="text" id="email" name="email">

            <label for="password">Password</label>
            <input required type="password" id="password" name="password">

            <label for="age">Age</label>
            <input required type="text" id="age" name="age">

            <label for="occupation">Occupation</label>
            <input required type="text" id="occupation" name="occupation">

            <label for="address">Address</label>
            <input required type="text" id="address" name="address">

            <input type="submit" id="signupClicked">
          </form>
        </div>
      </div>

      <div class="signin__overlay">
        <div class="signin__content">
          <form>
            <label for="email">Email</label>
            <input required type="text" id="Email" name="email">

            <label for="email">Password</label>
            <input required type="Password" id="Password" name="Password">

            <input type="submit" id="signinClicked">
          </form>
        </div>
      </div>


    <header class="headerMain">User System</header>
    <section>
        <button class="upButton" id="signUp">Sign Up</button>

        <button class="inButton" id="signIn">Sign In</button>
    </section>

  </div>

  <div id="userPage">

      <header class="headerUser">User System</header>
      <section>
          
      </section>
  
    </div>
    
    <script src="js/index.js"></script>
</body>
</html>

＆＃13;

验证本地存储中的现有用户

0 个答案: