網站首頁編程語言正文

登錄、注冊相關業務邏輯（模擬登錄、注冊）-H5本地存儲

作者：H-hang 更新時間： 2022-09-22 編程語言

登錄相關業務邏輯（模擬登錄、注冊）

關于H5本地存儲的內容，登錄、注冊案例可以很好的運用到相關的內容，此案例掌握的熟練，就可以很好的理解本地存儲的內容啦！本文就詳細的講解了登錄注冊相關的業務邏輯、以及相關頁面的源碼，大家可以仔細閱讀哦！（tips:如果有錯誤還請各位大佬指正哦！）

業務邏輯思維導圖

思維導圖
視頻：

登錄、注冊相關業務邏輯

頁面一：注冊

注冊頁面

組成1：用戶名

正則驗證

組成2：用戶密碼

正則驗證

組成3：確認密碼

判斷是否與用戶密碼相等

組成4：注冊按鈕

給注冊按鈕綁定單擊事件
- 1. 正則驗證
  - （1）驗證用戶名是否正確
    - 結果一：正確 --》進行下一步：驗證密碼
    - 結果二：不正確
      - 提示alert(‘用戶名輸入有誤！’) return
  - （2）驗證密碼是否正確
    - 結果一：正確 --》進行下一步：判斷兩次密碼是否相等
    - 結果二：不正確
      - 提示alert(‘密碼輸入有誤！’) return
- 1. 驗證兩次密碼是否相等
  - 結果一：相等
  - 結果二：不相等
    - 提示alert(‘兩次密碼不一致！’) return
- 3.獲取已經注冊的信息，判斷用戶名是否重復
  - 結果一：重復
    - 提示alert(‘用戶名已被注冊，不可以使用！’) return
  - 結果二：不重復
    - 操作1：把用戶注冊信息Push到arr數組中
    - 操作2：存儲到本地：需要把arr轉化位字符串
    - 操作3：提示alert(‘注冊成功！’)
    - 操作4：存儲之后跳轉到登錄頁面

具體代碼：

<!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>
            <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字符串：因為localStorage存儲的數據只能是字符串
        
        存放在localStorage中，即設置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>

原文鏈接：https://blog.csdn.net/SH744/article/details/126441446

上一篇：get方法和post方法的區別
下一篇：nodeSelector：Pod 定向調度

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁編程語言正文

登錄、注冊相關業務邏輯（模擬登錄、注冊）-H5本地存儲

登錄相關業務邏輯（模擬登錄、注冊）

業務邏輯思維導圖

頁面一：注冊

組成1：用戶名

組成2：用戶密碼

組成3：確認密碼

組成4：注冊按鈕

給注冊按鈕綁定單擊事件

頁面二：登錄

組成1：用戶名

組成2：密碼

組成3：登錄按鈕

免登錄：

給登錄按鈕綁定單擊事件

頁面三：首頁

組成1：登錄

組成2：歡迎你，XXX

組成3：退出

相關推薦

日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

網站首頁 編程語言 正文

登錄、注冊相關業務邏輯（模擬登錄、注冊）-H5本地存儲

登錄相關業務邏輯（模擬登錄、注冊）

業務邏輯思維導圖

頁面一：注冊

組成1：用戶名

組成2：用戶密碼

組成3：確認密碼

組成4：注冊按鈕

給注冊按鈕綁定單擊事件

頁面二：登錄

組成1：用戶名

組成2：密碼

組成3：登錄按鈕

免登錄：

給登錄按鈕綁定單擊事件

頁面三：首頁

組成1：登錄

組成2：歡迎你，XXX

組成3：退出

相關推薦

網站首頁編程語言正文