基于localStorage的登录注册

以下代码，如果有地方有错，请直接指出，我会改进的（只改错误，不改逻辑，因为我自己是不会这样写代码的，这个只适合初学者）：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>登录页面</title>
    </head>

    <body>
        <div id="web">
            <div>
                <span style="color: blue">登录</span>
            </div>
    
            <div>
                <span>用户名：</span>
                <input id="loginName" type="text" placeholder="请输入用户名" />
            </div>
            <div>
                <span>密码：&nbsp;&nbsp;&nbsp;</span>
                <input id="loginPsd" type="password" placeholder="请输入密码" />
            </div>
            <div>
                <button onclick="login()">登录</button>
            </div>
        </div>
    </body>
    <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
    <script>
        /**
         * 其他说明：
         * 1.全局变量使用var，var定义的变量可以修改，可以不用初始化
         * 2.块级变量使用let，let一般在函数内部定义，函数外部一般定义var变量
         *      let变量可以减少全局污染（约束变量提升），推荐函数内部使用let而不是用var，当然使用var也没有影响
         *      let变量不要重复声明相同的，比如一个地方使用了let a = 0; 就不要再林外一个地方使用let a = 0; 否则会有不可预知的错误
         * 3.const变量，let变量的规则均适用于const，使用const变量除了应当遵循let的规则以外，还需要遵循以下规则：
         *         1.const声明的变量不能重新赋值
         *         2.const声明的变量必须初始化（声明后必须立即初始化）
         * 4.尽量把var，let，const这三种变量分开，不建议一直使用var，这样不好，具体原因自己百度，这里不阐述
         * 5.var，let，const的级别为var>let>const
         * 6.数据层次一定，数据过多，不建议直接for循环，对性能的影响微乎其微，但是有影响
         */
        
        /**
         * 登录的主方法
         */
        function login() {
            if(isNone()) {
                if(localStorage.user) {
                    // 从localStorage取出键为user的数据模型
                    arr = eval(localStorage.user);
                    let k = 0;
                    // 循环取出，可用其他方法代理，数据量多的情况下，不建议使用for循环
                    for(e in arr) {
                        // 判断用户名，密码是否和localStorage中的数据一致，兼容性写法必须添加trim(),不需要兼容可以不写
                        if($('#loginName').val().trim() == arr[e].loginName) {
                            if($('#loginPsd').val().trim() == arr[e].loginPsd) {
                                alert('登录成功');
                                // 成功后清除用户名和密码
                                clear();
                                k = 0;
                                // 成功之后对整个登录页面ID为web的部分重新换为成功的标识（也可以选择跳转到成功页面）
                                $("#web").html("<span style='color: blue;'>登录成功【success】</span>");
                                return;
                            } else {
                                alert('密码错误');
                                // 失败后清除用户名和密码
                                clear();
                                k = 0;
                                return;
                            }
                        } else {
                            k = 1;
                        }
                    }
                    if(k == 1) {
                        alert('用户名不存在');
                        clear();
                    }
                } else {
                    alert('用户名不存在，正在跳转到注册页面！');
                    window.location.href="register.html";
                    clear();
                }
            }
        }

        /**
         * 清空数据
         * 等同于
         * document.getElementById("loginName").value="";
         * document.getElementById("loginPsd").value="";
         */
        function clear() {
            $('#loginName').val('');
            $("#loginPsd").val('');
        }

        /**
         * 登录的验证方法
         * 是否为空的判断
         */
        function isNone() {
            if($('#loginName').val().trim() == "") {
                alert('用户名不能为空');
                return false;
            } else if($('#loginPsd').val().trim() == "") {
                alert('密码不能为空');
                return false;
            }
            return true;
        }
    </script>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>

    <body>
        <div id="web">
            <div>
                <span style="color: red;">注册</span>
            </div>
    
            <div>
                <span>用户名：&nbsp;&nbsp;&nbsp;</span>
                <input id="loginName" type="text" placeholder="请输入用户名" />
            </div>
            <div>
                <span>密码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                <input id="loginPsd" type="password" placeholder="请输入密码" />
            </div>
            <div>
                <span>确认密码：</span>
                <input id="loginPsd2" type="password" placeholder="请再次输入密码" />
            </div>
            <div>
                <button onclick="register()">注册</button>
            </div>
        </div>
    </body>
    <script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
    <script>
        /**
         * 注册的主方法
         */
        function register() {
            if(isNone()) {
                // 定义一个空数组
                let arr = [];
                if(localStorage.user) {
                    arr = eval(localStorage.user);
                    for(e in arr) {
                        // 取出数据判断是否注册过
                        if($('#loginName').val().trim() == arr[e].loginName) {
                            alert('该账号已被注册');
                            clear();
                            return;
                        }
                    }
                }
                const user = {
                    'loginName': $("#loginName").val(),
                    'loginPsd': $("#loginPsd").val()
                };
                // 添加数据
                arr.push(user);
                localStorage.user = JSON.stringify(arr);
                alert('注册成功');
                window.location.href="login.html";
                clear();
            }
        }
        
        /**
         * 清空数据
         * 等同于
         * document.getElementById("loginName").value="";
         * document.getElementById("loginPsd").value="";
         */
        function clear() {
            $('#loginName').val('');
            $("#loginPsd").val('');
            $("#loginPsd2").val('');
        }
        
        /**
         * 注册的验证方法
         * 是否为空的判断
         * 两次密码是否相等的判断
         */
        function isNone() {
            if($('#loginName').val().trim() == "") {
                alert('用户名不能为空');
                return false;
            } else if($('#loginPsd').val().trim() == "") {
                alert('密码不能为空');
                return false;
            } else if($('#loginPsd').val().trim() != $('#loginPsd2').val().trim()) {
                alert('两次密码不一致，请检查！');
                return false;
            }
            return true;
        }
    </script>

</html>

 

posted @ 2018-06-29 11:05  雨落秋垣  阅读(3346)  评论(0)  编辑  收藏  举报