<!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>