web储存用户信息

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <form>

            昵称：<input type="text" id="username"><br><br> 密码：

            <input type="password" id="password"><br><br>

            <input type="button" value="登录" id="login">

            <input type="button" value="注册" id="resiger">

            <input type="button" value="clear" id="clear">

        </form>

        <script type="text/javascript">

            //需求分析：把获取的用户名和密码存入本地存储中

            //当用户登陆的时候判断用户名和密码是否在存储中

            //我认为应该这样存储用户名和密码

            //userpass:[{username:zhangsan,password:123456},{username:lisi,password:123456}]

            var login = document.getElementById("login");

            var resiger = document.getElementById("resiger");

            var user = document.getElementById("username");

            var pass = document.getElementById("password");

            var clear = document.getElementById("clear");

            //开始的时候获取本地存储，如果没有，置为[],否则获取

            var str = window.localStorage.getItem("userpass") || "[]";

            var userpass = JSON.parse(str);

            //注册功能实现

            resiger.onclick = function() {

                    //非空判断

                    var person = {

                        username: user.value,

                        password: pass.value

                    };

                    //需要判定用户名是否重复，如果重复，提示该用户名已被注册，并且return

                    //如果没有重复，就把他放入数组中

                    userpass.push(person);

                    console.log(userpass);

                    var str = JSON.stringify(userpass)

                    window.localStorage.setItem("userpass", str);

                }

                //登陆功能实现

            login.onclick = function() {

                var username = user.value;

                var password = pass.value;

                var flag = 0;

                for(var i = 0; i < userpass.length; i++) {

                    if(username == userpass[i].username && password == userpass[i].password) {

                        alert("欢迎" + username + ",登陆成功！");

                        return;

                    } else {

                        flag++;

                    }

                }

                if(flag == userpass.length) {

                    alert("登陆不成功");

                }

            }

            clear.addEventListener('click',function(){

                window.localStorage.clear();

            })

        </script>

    </body>

</html>
巴特西

web储存用户信息

最新文章

热门文章
