登录、注册相关业务逻辑（模拟登录、注册）-H5本地存储

本文介绍: 关于H5本地存储的内容，登录、注册案例可以很好的运用到相关的内容，此案例掌握的熟练，就可以很好的理解本地存储的内容啦！本文就详细的讲解了登录注册相关的业务逻辑、以及相关页面的源码！

登录相关业务 逻辑（模拟 登录、注册）

关于H5本地存储的内容，登录、注册案例可以很好的运用到相关的内容，此案例掌握的熟练，就可以很好的理解本地存储的内容啦！本文就详细的讲解了登录注册相关的业务逻辑、以及相关页面的源码，大家可以仔细阅读哦！（ti ps:如果有错误还请各位大佬指正哦！）

业务 逻辑 思维导图

思维导图
视频：

页面一：注册

注册页面

组成4：注册按钮

给注册按钮绑定单击事件
- 1. 正则验证
  - （1）验证用户名是否正确
    - 结果一：正确 –》进行下一步：验证密码
    - 结果二：不正确
      - 提示 alert(‘用户名输入有误！’) return
  - （2）验证密码是否正确
    - 结果一：正确 –》进行下一步：判断两次密码是否相等
    - 结果二：不正确
      - 提示 alert(‘密码输入有误！’) return
- 1. 验证两次密码是否相等
  - 结果一：相等
  - 结果二：不相等
    - 提示 ale rt(‘两次密码不一致！’) return
- 3.获取已经注册的信息，判断用户名是否重复
  - 结果一：重复
    - 提示 ale rt(‘用户名已被注册，不可以使用！’) return
  - 结果二：不重复
    - 操作1：把用户注册信息Push到arr 数组中
    - 操作2：存储到本地：需要把arr转化位字符串
    - 操作3：提示ale r t(‘注册成功！’)
    - 操作4：存储之后跳转到登录页面

具体代码：

&lt;!DOCTYPE html&gt;
<html lang="en"&gt;

<head&gt;
    <meta charset="UTF-8"&gt;
    <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    <title>模拟注册</title>
    <style>
        p {
            margin: 10px;
        }
        
        input[type="text"],
        input[type="password"] {
            width: 180px;
            height: 20px;
            padding-left: 5px;
        }
    </style>
</head>

<body>
    <form>
        <p>
            <label for="user">用户名：</label>
            <input type="text" name="username" id="userName" placeholder="2-8位汉字">
        </p>
        <p>
            <label for="pwd">用户密码：</label>
            <input type="password" name="userpwd" id="userPwd" placeholder="6-16位（英文大小写/数字_-）">
        </p>
        <p>
            <label for="pwd">确认密码：</label>
            <input type="password" name="repwd" id="rePwd" placeholder="确认密码">
        </p>
        <p>
            <input type="button" value="注册" id="regBtn">
        </p>
    </form>

    <script>
        // 思路：
        // 1. 点击注册按钮，进行正则判断：判断用户账号、用户密码、确认密码是否输入正确
        // 2. 获取到用户账号，用户密码
        // 3. 注册成功后，把用户注册信息存放在本地存储中
        // 4. 跳转到登录页面

        // 获取注册按钮
        var regBtn = document.querySelector('#regBtn');
        // 获取用户账户框
        var inpName = document.querySelector('#userName');
        // 获取用户密码框
        var inpPwd = document.querySelector('#userPwd');
        // 获取用户密码框
        var inpRepwd = document.querySelector('#rePwd');

        // 给注册按钮绑定点击事件
        regBtn.onclick = function() {
            // 获取到用户账号的值
            var userNameVal = inpName.value;
            // 获取到用户密码的值
            var userPwdVal = inpPwd.value;
            // 获取到确认密码的值
            var rePwdVal = inpRepwd.value;

            // 正则表达式
            // 用户账号
            var userReg = /^[u4e00-u9fa5]{2,8}$/;
            // 密码
            var pwdReg = /^[a-zA-Z0-9_-]{6,16}$/;

            // 封装验证的方法
            function yz(reg, inputEle) {
                if (reg.test(inputEle.value)) {
                    // 校验通过
                    return true;
                } else {
                    // 校验不通过
                    return false;
                }
            };

            // 拿到每个输入框的返回值
            var isflag1 = yz(userReg, inpName);
            var isflag2 = yz(pwdReg, inpPwd);
            var isflag3 = yz(pwdReg, inpRepwd);

            // 如果用户名和密码有一个返回值是错误的，则就无法登录成功
            if (!isflag1 || !isflag2 || !isflag3) {
                alert('请正确输入用户名和密码！');
                return;
            }


            if (userPwdVal !== rePwdVal) {
                alert('密码不一致，请重新输入！');
                inpRepwd.value = '';
                return;
            }


            // 存储用户注册的信息

            // 逻辑：
            // 1. 从本地数组中获取data的值
            // 2. 如果有的话，就直接push是可以的
            // 3. 但是如果data没有内容的话,那么会得到一个null，null是没有push方法可以调用，所以会报错。
            // 4. 这里就需要用||运算符来实现兼容操作

            // localStorage.getItem('data') 获取data内容
            // 如果localStorage.getItem('data')是TRUE  就直接格式化然后push（json格式字符串转对象）
            // 如果localStorage.getItem('data')是false，就直接执行|| 后面的内容 就是给一个空数组

            //(1)获取已经注册的信息
            var dataObj = localStorage.getItem('data');
            var arr = JSON.parse(dataObj) || []; //true执行||前面  false执行||后面

            //(2)存储用户注册的信息之前判断用户名是否重复
            // 循环data数组
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].userNameVal == inpName) {
                    alert('用户名已被注册，不可以使用！');
                    return;
                }
            }

            // 注册成功之后，把用户注册信息Push到arr数组中
            arr.push({
                uname: userNameVal,
                upwd: rePwdVal
            });

            // 存储到本地：需要把arr转化位字符串
            var arrStr = JSON.stringify(arr);
            localStorage.setItem('data', arrStr);

            alert('注册成功！');

            // 存储之后跳转到登录页面
            location.href = './01-免登录.html'
        }
    </script>
</body>

</html>

页面二：登录

登录页面

组成1：用户名

正则验证

组成2：密码

正则验证

组成3：登录按钮

免登录：
- 获取用户输入的账号是否存在本地存储
  - 判断userInfo是否存在
    
    userInfo是找localStorage中存在的user信息
    - 结果一：存在
      - 把获取到的用户信息userInfo转换成 json 对象
        userInfo是json 字符串
      - 获取到用户的用户名uname以及用户密码upwd
给登录按钮绑定单击事件
- 1.正则验证
  - （1）验证用户名是否正确
    - 结果一：正确 –》进行下一步：验证密码
    - 结果二：不正确
      - 提示alert(‘用户名输入有误！’) return
  - （2）验证密码是否正确
    - 结果一：正确 –》进行下一步：判断两次密码是否相等
    - 结果二：不正确
      - 提示alert(‘密码输入有误！’) return
- 2.拿到已经注册了的信息
  - 判断arr（本地存储的data数据）里面是否存在对应的用户名
    - 结果一：不存在
      - 提示alert(‘账号没有注册！’) return
    - 结果二：存在
      - 进行下一步==》验证密码
  - 判断密码框的值和本地存储的用户信息的密码是否一致
    - 结果一：错误
      - 提示alert(‘密码错误！’) return
    - 结果二：正确
      - 操作1：把获取到的内容放在对象 info中
      - 操作2：把存放在localStorage中
        
        把js 对象转换成json 字符串：因为lo calStorage存储的数据只能是字符串
        
        存放在lo calStorage中，即设置 setItem
  - 跳转到首页

具体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        p {
            margin: 10px;
        }
        
        input[type="text"],
        input[type="password"] {
            width: 180px;
            height: 20px;
            padding-left: 5px;
        }
    </style>
</head>

<body>
    <form>
        <p>
            <label for="user">用户名：</label>
            <input type="text" name="username" id="userName" placeholder="2-8位汉字">
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" name="userpwd" id="userPwd" placeholder="6-16位（英文大小写/数字_-）">
        </p>
        <p>
            <input type="button" value="登录" id="loginBtn">
            <a href="./02-模拟注册.html">注册</a>
        </p>
    </form>

    <script>
        // 思路：
        // 1. 进入页面之后，起初不存在user，本地存储没有内容
        // 2. 当进行过一次输入之后，本地存储中存在之前输入过的用户名和密码
        // 3. 判断localStorage是否已经userName存在，如果已经存在则直接把值赋值给用户名和密码
        // 4. 给登录按钮绑定点击事件，点击登录获取到用户名和密码存放在localStorage中



        // 找localStorage中是否存在user
        // info是本地存储的key
        // 这个userInfo 是json字符串
        var userInfo = localStorage.getItem('info');

        // 获取到用户名框和密码框
        var inpName = document.querySelector('#userName');
        var inpPwd = document.querySelector('#userPwd');

        // 正则表达
        // 用户名
        var userReg = /^[u4e00-u9fa5]{2,8}$/;
        // 密码
        var pwdReg = /^[a-zA-Z0-9_-]{6,16}$/;

        // 封装验证的方法
        function yz(reg, inputEle) {
            if (reg.test(inputEle.value)) {
                // 校验通过
                return true;
            } else {
                // 校验不通过
                return false;
            }
        }

        // 1. 判断userInfo是否存在
        if (userInfo) {
            // 存在
            // 把获取userInfo（json字符串转换成json对象），并显示到用户名框中
            // （1）把json字符串转换成json对象，这样才能拿到对象中的属性的值
            var userObj = JSON.parse(userInfo);
            // （2）设置用户名框和密码框的内容
            inpName.value = userObj.uname;
            inpPwd.value = userObj.upwd;
        }

        // 2. 登录按钮绑定单击事件
        // （1）获取到登录按钮
        var loginBtn = document.querySelector('#loginBtn');
        // （2）绑定单击事件
        loginBtn.onclick = function() {
            // 获取到用户名
            var inpNameVal = inpName.value;
            var inpPwdVal = inpPwd.value;

            // 拿到每个输入框的返回值
            var isflag1 = yz(userReg, inpName);
            var isflag2 = yz(pwdReg, inpPwd);

            // 如果用户名和密码有一个返回值是错误的，则就无法登录成功
            if (!isflag1 || !isflag2) {
                alert('用户名或密码输入有误，请重新输入！')
                return false;
            }

            // //拿到已经注册了的信息
            var arr = JSON.parse(localStorage.getItem('data')) || [];

            // //判断用户名和密码和 注册的信息 相比较 是不是正确
            var dataStr = arr.find(function(item) {
                return item.uname === inpNameVal;
            })
            console.log(dataStr);
            if (!dataStr) {
                alert('账号没有注册！');
                return;
            }
            if (dataStr.upwd !== inpPwdVal) {
                alert('密码错误！');
                return;
            }

            // 存放在localStorage中
            // 把获取到的内容放在对象中
            var info = {
                uname: inpNameVal,
                upwd: inpPwdVal
            };
            // 把js对象转换成json字符串：因为localStorage存储的数据只能是字符串
            var jsonStr = JSON.stringify(info);
            // 存放在localStorage中，即设置setItem
            localStorage.setItem('info', jsonStr);

            // 跳转到首页
            window.location.href = './03-index.html'
        }
    </script>
</body>

</html>

页面三：首页

首页1

首页2

组成1：登录

情况1：显示
- 用户没有进行过登录操作时，登录，默认显示
  - 点击登录链接可以跳转到登录页面
情况2：隐藏
- 用户进行过登录操作时，登录，默认隐藏

组成2：欢迎你，XXX

情况1：显示
- 用户进行过登录操作时，欢迎你XXX ，默认显示
- 修改欢迎你后面的值
  - 操作1：获取到本地存储info的uname
  - 操作2：获取到本地存储info的uname赋值给XXX
情况2：隐藏
- 用户没有进行过登录操作时，欢迎你XXX ，默认隐藏

组成3：退出

情况1：显示
- 用户进行过登录操作时，欢迎你XXX ，默认显示，同时显示退出按钮
- 给退出按钮绑定单击事件
  - 点击退出按钮，删除本地存储的info信息
情况2：隐藏
- 用户没有进行过登录操作时，欢迎你XXX ，默认隐藏，退出按钮按默认隐藏

具体代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="login">
        <a href="./01-免登录.html">登录</a>
    </div>
    <div class="hidden">
        <p>欢迎你,<span id="username">XXX</span></p>
    </div>
    <div>
        <input type="button" name="" id="loginOut" value="退出" class="hidden">
    </div>

    <script>
        function toggleLogin() {
            var infoStr = localStorage.getItem('info');
            // 如果本地存储有内容
            if (infoStr != null) {
                var info = JSON.parse(infoStr);
                // 修改欢迎你后面的值
                document.getElementById('username').innerText = info.uname;
                // 欢迎你XXX显示
                document.querySelector('.hidden').style.display = 'inline-block';
                // 登录隐藏
                document.querySelector('.login').style.display = 'none';
                // 退出显示
                document.getElementById('loginOut').style.display = 'inline-block';
            } else {
                // 如果本地存储没有内容
                // 欢迎你XXX隐藏
                document.querySelector('.hidden').style.display = 'none';
                // 登录显示
                document.querySelector('.login').style.display = 'inline-block';
                // 退出显示
                document.getElementById('loginOut').style.display = 'none';
            }
        }
        toggleLogin();

        // 单击退出 ，退出登录
        document.getElementById('loginOut').onclick = function() {
            // 删除的应该是info这个键值对  不是infoStr
            localStorage.removeItem('info');
            // 重新加载页面
            // location.reload();

            // 调用切换函数
            toggleLogin();
        }
    </script>
</body>

</html>