Question

我在一个空的html（不在网页上）中创建了注册和登录选项，只是为了看看我是否可以以及如何做到这一点。现在我遇到了一个问题 - 我可以注册多个具有相同值的用户名（例如，我可以根据需要多次注册“test username”）。
我想知道如何检查用户输入注册的值是否已经注册这是我的代码：

HTML：

<!-- Login -->
<div class="login">
<label>Login</label>
<input type="text" id="login-username" class="textbox"  placeholder="Username"/>
<input type="password" id="login-password" class="textbox" placeholder="Password"/>
<button type="submit" onclick="login()">Login</button>
</div>

<!-- Register -->
<div class="register">
<label>Register</label>
<input type="text" id="register-username" class="textbox" placeholder="Username"/>
<input type="password" id="register-password" class="textbox" placeholder="Password"/>
<button type="submit" onclick="register()">Register</button>
</div>

JavaScript：

function login() {
if(document.getElementById("login-username").value == username1 && document.getElementById("login-password").value == password1) {
    alert("Hi " + username1 + " you are now logged in.");
} else if(document.getElementById("login-username").value == username2 && document.getElementById("login-password").value == password2) {
    alert("Hi " + username2 + " you are now logged in.");
} else {alert("Wrong username or password");}


function register() {
if (username1 == null && password1 == null) {
    localStorage.removeItem("username1");
    localStorage.setItem("username1", document.getElementById("register-username").value);
    localStorage.removeItem("password1");
    localStorage.setItem("password1", document.getElementById("register-password").value);
    alert("Hi, " + document.getElementById("register-username").value + " is now registered.");
    location.reload();
} else if (username2 == null && password2 == null) {
    localStorage.removeItem("username2");
    localStorage.setItem("username2", document.getElementById("register-username").value);
    localStorage.removeItem("password2");
    localStorage.setItem("password2", document.getElementById("register-password").value);
    alert("Hi, " + document.getElementById("register-username").value + " is now registered.");
    location.reload();
}

var username1 = localStorage.getItem("username1");
var username2 = localStorage.getItem("username2");

var usernameAlpha = [username1, username2]; //This is a list of all usernames 
//and it's what I want to look through when I'm checking if the value/username already exists


var password1 = localStorage.getItem("password1");
var password2 = localStorage.getItem("password2");

Answer 1

试试这个

function register(){
   var users = JSON.parse(localStorage.getItem('users')) || [];
   var username = document.getElementById("register-username").value;
   var password= document.getElementById("register-password").value;
   var toBeRegister= true;
   for(i=0;i<users.length;i++){
      if(users[i].username === username){
         toBeRegister = false
      }
   }
   if(toBeRegister){
      users.push({username:username,password:password})
      localStorage.setItem('users', JSON.stringify(users));
   }
}

Answer 2

感谢Rajesh，我能够让它发挥作用，以下是：

我只是用他的方法检查用户输入的用户名是否在usernameAlpha中。如果是，我显示了一条警告消息＆＃34;用户名被采取＆＃34;如果不是，我只是像平常那样注册用户。

以下是代码：

function register() {
if(usernameAlpha.indexOf(document.getElementById("register-username").value) > -1) {alert("Username taken")
    } else if (username1 == null && password1 == null && document.getElementById("register-username").value != "" && document.getElementById("register-password").value != "") {
    localStorage.removeItem("username1");
    localStorage.setItem("username1", document.getElementById("register-username").value);
    localStorage.removeItem("password1");
    localStorage.setItem("password1", document.getElementById("register-password").value);
    alert("Hi, " + document.getElementById("register-username").value + " is now registered.");
    location.reload();

    } else if (username2 == null && password2 == null && document.getElementById("register-username").value != "" && document.getElementById("register-password").value != "") {
    localStorage.removeItem("username2");
    localStorage.setItem("username2", document.getElementById("register-username").value);
    localStorage.removeItem("password2");
    localStorage.setItem("password2", document.getElementById("register-password").value);
    alert("Hi, " + document.getElementById("register-username").value + " is now registered.");
    location.reload();
    }
}

Answer 3

你提到了数组＆＃39;但是不能很好地使用它们。您仍然有变量username1和username2，这意味着如果要引入username3，则必须（再次）复制一堆代码。如果构建用户数组或用户名为键/属性名的对象，则可以构建更动态的用户数据库。

您可以以序列化方式保存和加载整个对象与localStorage的连接。

请注意，尽管这是一项有趣的练习，但localStorage并不是一个安全的地方，存储密码（无论是纯文本还是加密）也不是一个好习惯。

无论如何，它看起来像这样：

＆＃13;

var
  userDatabase = null;
  
function loadUserDatabase() {
  // Load the user database only if it wasn't loaded yet. This way, various functions can 
  // always call this function 'to be sure'.
  if (userDatabase === null)
    userDatabase = JSON.parse(localStorage.getItem("userDatabase"));
}

function saveUserDatabase() {
  // Save the entire database back to local storage.
  localStorage.setItem("userDatabase", JSON.stringify(userDatabase));
}

function normalizeUsername(username) {
  // "Normalize" the username by converting different styles of writing to
  // a base form.
  // In this case, trim and convert to lowercase to effectively make user 
  // names case insensitive while still usings keys/properties.
  return username.trim().toLowerCase();
}

function findUser(username) {
  // Check if user database is loaded
  loadUserDatabase();

  // Find the user by username.
  username = normalizeUsername(username);
  if (userDatabase.hasOwnProperty(username)) {
    return userDatabase[username];
  }
  return false;
}

function isValidUsername(username) {
  // Implement any limits you want (or need) to impose here. 
  // A length check of, say <1000 would be a nice addition.
  return username != '';
}

function setUser(username, password) {
  loadUserDatabase();
  username = normalizeUsername(username);
  
  // Set/overwrite the user
  userDatabase[username] = {password: password};
  // Save the database to disk.  
  saveUserDatabase();
}

function login() {
  var username = document.getElementById("login-username").value;
  var password = document.getElementById("login-password").value;
  
  if (user = findUser(username)) {
    if (user.password == password) {
      // There is a match, log in
      alert('login successful as user ' + username);
    } else {
      // Password incorrect
      alert('Invalid password for username ' + username);
    }
  } else {
    // User not found
    alert('User ' + username + ' not found');
  }
}

function register() {
  var username = document.getElementById("register-username").value;
  var password = document.getElementById("register-password").value;
  
  if (!isValidUsername(username)) {
    alert('invalid username')
  } else if (user = findUser(username)) {
    alert('user ' + username + ' already exists');
  } else {
    setUser(username, password);
    alert('user ' + username + ' created');
  }
}

＆＃13;

<!-- Login -->
<div class="login">
<label>Login</label>
<input type="text" id="login-username" class="textbox"  placeholder="Username"/>
<input type="password" id="login-password" class="textbox" placeholder="Password"/>
<button type="submit" onclick="login()">Login</button>
</div>

<!-- Register -->
<div class="register">
<label>Register</label>
<input type="text" id="register-username" class="textbox" placeholder="Username"/>
<input type="password" id="register-password" class="textbox" placeholder="Password"/>
<button type="submit" onclick="register()">Register</button>
</div>

＆＃13;

Answer 4

使用Object.prototype中的toString方法。

if( Object.prototype.toString.call( Variable ) === '[object Array]' ) {
    alert( 'Array!' );
}

如何检查变量的值是否在数组中？

4 个答案: