用原生js写登录注册本地存储练习

IT小虎

于 2022-12-21 21:51:28 发布

阅读量456

点赞数 1

分类专栏： JavaScript js 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_47195969/article/details/128402508

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

注册代码：

<!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>Document</title>
</head>
<body>
        账号：<input type="text" name="username" id="account"><br>
        密码：<input type="password" name="pwd" id="pwd"><br>
        <input type="submit" value="注册" class="register">
    <script>
            var username = document.getElementById('account');
            var pwd = document.getElementById('pwd');
            var register = document.querySelector('.register');
            register.addEventListener('click',function() {
                var usernameVal = username.value;
                var pwdVal = pwd.value;
                var users = localStorage.users;
                if (users == undefined) {
                    var usersArr = [usernameVal + '-' + pwdVal];
                    var usersStr = usersArr.toString();
                    localStorage.users = usersStr;
                    alert('注册成功，即将进入登录页面');
                    window.location.href = "./007-登录页面.html";
                } else {
                    var usersArr = users.split(',');
                    var flag = false;
                    for (var i = 0; i < usersArr.length - 1; i++) {
                        var user = usersArr[i].split("-");
                        if (user[0] == usernameVal ) {
                            flag = true;
                            break;
                        }
                    }
                    if (flag) {
                        alert('该用户名已被占用，请重新注册');
                        username.value = '';
                        pwd.value = '';
                    } else {
                        usersArr[usersArr.length] = usernameVal + '-' + pwdVal;
                        var usersStr = usersArr.toString();
                        localStorage.users = usersStr;
                        alert('注册成功，即将进入登录页面');
                        window.location.href = "./007-登录页面.html";
                    }
                }
            });
    </script>
</body>
</html>

登录页面

<!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>Document</title>
</head>
<body>
        账号：<input type="text" name="username" id="account"><br>
        密码：<input type="password" name="pwd" id="pwd"><br>
        <input type="submit" value="登录" class="register">
    <script>
            var username = document.getElementById('account');
            var pwd = document.getElementById('pwd');
            var register = document.querySelector('.register');
            register.addEventListener('click',function() {
                var usernameInVal = username.value;
                var pwdInVal = pwd.value;
                var users = localStorage.users;
                var usersArr = users.split(',');
                var flag = false;
                for(var i = 0; i < usersArr.length; i++) {
                    userName = usersArr[i].split('-')[0];
                    userPwd = usersArr[i].split('-')[1];
                    if (userName == usernameInVal && pwdInVal == userPwd) {
                        flag = true;
                        break;
                    }
                }
                if (flag) {
                    alert('注册成功，即将进入登录页面');
                    window.location.href = "https://www.csdn.net/";
                    
                } else {
                    alert('账号未注册，请进入注册页面注册');
                    usernameInVal = '';
                    pwdInVal = '';
                    window.location.href = "006-注册页面.html";
                }
                
            });
    </script>
</body>
</html>