使用jquery登录系统

时间:2016-11-23 14:07:00

标签: javascript jquery html css login

我正在尝试建立一个网站,您可以注册并登录到创建的帐户我不想将用户名和密码保存到数据库或任何东西(这是一个学校项目)所以这不重要,我只是希望能够通过本地存储保存帐户,如果可能的话,并且能够登录:

1:如何创建可通过localstorage保存的帐户。

2:如果用户名和密码正确,如何登录,如果不正确则如何进行登录

我如何在Jquery中这样做?提前谢谢!

HTML:

<div id="log-in-modal">
    <div class="modal-content">
        <span class="close" id="close-log-in">x</span>
        <p><label>Username</label><input type="text" id="username"></p>
        <p><label>Password</label><input type="password" id="password"></p>
        <input type="submit" value="Log In" id="submit">
    </div>
</div>

<div id="sign-up-modal">
    <div class="modal-content">
        <span class="close" id="close-sign-up">x</span>
        <p><label>Username</label><input type="text" id="sign-username"></p>
        <p><label>Password</label><input type="password" id="sign-password"></p>
        <input type="submit" value="Sign Up" id="sign-submit">
    </div>
</div>

这些是带有用户名和密码文本字段的模态,我点击网站菜单上的“登录”按钮或“注册”按钮打开模态。

1 个答案:

答案 0 :(得分:1)

您可以在本地存储中存储2个阵列并从中推送/拉出:

步骤1:创建用户名/密码数组(如果它们不存在)

if(localStorage['usernames'] && localStorage['passwords']) { // see if they exist yet
    // code to execute if the arrays already exist
} else {
    var usernames = []; 
    var passwords = []; // create two empty arrays if nothing is in Local Storage
}

第2步:创建注册功能

function signUp(signUpUsername, signUpPassword) {
    usernames.push(signUpUsername); // adds username to the end of array
    passwords.push(signUpPassword); //  "   password "   "   "  "    "
}

第3步:创建登录功能

function logIn(loginUsername, loginPassword) {
    var cu = localStorage['usernames']; // correct usernames
    var cp = localStorage['passwords']; // correct passwords

浏览数组以查看凭据是否正确

    for(var i = 0; i < cu.length; i++) {
        if(cu[i] == loginUsername && cp[i] == loginPassword) {
            // you have been logged in!
        } else {
            // incorrect credentials (display message!)
        }
    }
}

注意:此示例忽略安全性并使用直接存储在浏览器中的本地存储!如果有人窃取了数据,请确保数据没有价值。