How to use arrays to verify login and registration (same interface) without connecting to the database

When we log in to a brand new website for the first time, the first thing we need to do is to register an account. After the registration is successful, we can log in. Then these two functional modules want to verify the consistency of the account without connecting to the database. , you need to use the array function of the JS part to implement. The main idea is, 1. Create an array to obtain the string of the registration interface, 2. Compare the input content of the text box of the login interface with the string already stored in the array, and log in if they are consistent. Success, otherwise display alert, "username or password error"

First, create an array in the JS part to store the username and password separately

var users = [];
var passwords = [];

Then, get the username and password of the registration interface into the array

      var text=document.querySelector('.text')
      var password=document.querySelector('.password')
      if(text.value==''||password.value==''){
                 alert('请输入注册用户名和密码');
                 return false;
      }else{
           users.push(text.value);
           passwords.push(password.value);
           console.log(users);
           console.log(passwords);
           alert('恭喜注册成功，请返回登录');
}
}  

 

The function of console.log("content"); is to output the "content" on the console, which is convenient for subsequent debugging work (for the console, press and hold F12 in the browser to open the console in developer mode), and You can do experiments in time under the console tab)

 

Finally, use the method of array traversal (for loop) to verify whether the string at the time of login is the same as the registered string, jump if they are the same, and prompt an error if they are different

for (var i = 0; i < users.length; i++) {
                   for (var j = 0; j < passwords.length; j++) {
                        if (text.value == users[i] && password.value==passwords[j]) {
                            window.location.href = "cs.html";
                        } else {
                            alert('用户名或密码错误');
                        }
                    }
                }
            }

In this way, the verification of the login and registration interfaces can be realized, but the premise of this method is that the registration and login modules are in the same html. If there are two interfaces, the login interface cannot receive the data of the registration interface, and a JS front-end is required Cross-page value transfer, (you will use the database later in the study), you can pass the value through cookies or through H5 Web storage. Since I have not implemented this function, you can refer to the rookie tutorial or find the answer on the official website by yourself.