HTML+JS＜大一新生入门＞编写一个注册登入界面并完成部分后端操作

本文链接：https://blog.csdn.net/wyyu9420/article/details/121617854

本文作者作为大学新生，分享了自己初次接触编程时完成的一个简单注册登录界面的实现。使用HTML和JavaScript，结合本地存储完成用户账号和密码的保存与验证。虽然存在数据覆盖和安全性问题，但通过增加变量i实现了多次注册信息的保存。作者期待进一步学习数据库知识以完善此功能，并欢迎交流讨论。

摘要由CSDN通过智能技术生成

今年是我刚刚进入大学的第一年，从小就对计算机感兴趣的我，学的却不是计算机专业。但是最近我参加了个有关计算机编程的实验室，第一个作业就是编写一个注册登入界面以及用CSS和JS完成布局美化和部分的后端操作（其实就是账号和密码的匹配过程。）

实现的过程很简单，毕竟我也是刚刚入门，而且没有用数据库，只是用了本地存储，因为我在做这个作业的时候发现CSDN里面一直没有我想要的内容，而现在我做好了，所以想分享一下，随便也记录一下我入门的过程。

首先我们编写一段注册的页面。

<!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>
    <style>
        table{
            height: 100%;
            
        }   
    </style>
</head>
<body>
    //这里我用了table标签进行布局
    <table align="center">//table标签居中显示
        <tr>//第一个tr列弄了个账号的input栏
            <td>账户：</td>
            <td><input type="text" placeholder="请输入你的账户" maxlength="11" id="username"></td>
        </tr>

        <tr>//第二个tr列弄了个密码栏
            <td>密码：</td>
            <td><input type="password" placeholder="请输入你的密码" maxlength="11" id="password"></td>
        </tr>

        <tr>//这是一个Input的提交标签
            <td></td>
            <td><input type="submit" value="注册" id="zhuce"></button></td>
        </tr>
    </table>
    
</body>
</html>

这是一段简单的HTML注册界面的超文本

账户标签：input

type=text(文本输入框）

placeholder:是文本输入框内部显示的文字。用于进一步提升用户填写对应的信息。

maxlength：限制用户输入的最大字符长度（这里是只能输入11个字符。也就是11个数字吧！）

id=username

密码标签：input

type=password(文本输入框,但是在输入的时候会隐藏输入的内容）

id=password

注册标签：input

type=submit(提交）

value:是显示的名称

id=zhuce（也就是注册的拼音）

接下来我们用本地储存进行账号和密码的储存操作

利用本地储存进行后端操作

编写一段本地储存的js代码

<script>
        function save_date(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            localStorage.setItem("username",username);
            localStorage.setItem("password",password);
            window.alert("注册成功");
        }
    </script>

1：获取账号和密码输入框的信息：这里我定义了2个变量：一个username，一个password，分别用来获取上面文本框里面的信息（这里使用document.getElementById("id").value来实现）

2：本地储存上面的信息：然后利用localStorage.setItem("名",值)，函数来实现。这里的名指的是你储存信息的名字，因为这里我储存的是账号，所以我取名为username。然后后面的值，指的是你要储存的东西，这里我写的也是username，其实就是上面的两个变量中的username变量，因为username变量里面储存的就是我文本框里面输入的值，所以我需要储存的值在文本框里面。【password也一样！】

我们来测试效果

现在我们已经完成了账号和密码的本地储存工作。

后面进行登入系统的实现。

登入页面的HTML超文本编写


<body>
    <table width="500" align="center" height="100px"  style="border-block-color:#808080">
        <tr>
            <td>用户名：</td>
            <td><input type="text" id="dr_username" placeholder="用户名" /></td>
        </tr>

        <tr>
            <td>密码：</td>
            <td><input type="text" id="dr_password" placeholder="密码" /></td>
        </tr>

        <tr>
            <td></td>
            <td><input type="submit" value="登入" onclick="find_date()" id="dr"></td>
            
        </tr>
    </table>

和上面注册的页面是一样的，只不过在最后一个input标签换了个value。

接下来我们编写登入界面的js代码。实现账号和密码的提取和匹配过程。

登入界面的js代码实现

function find_date(){
            var dr = document.getElementById("dr");
            var username_text = document.getElementById("dr_username").value;  
            var password_text = document.getElementById("dr_password").value;
            var user_name = localStorage.getItem("username");
            var user_password = localStorage.getItem("password");
            if(username_text==user_name && password_text==user_password){
                window.alert("登入成功");
            }else{
                window.alert("登入失败");
            }
            
            
        }

这里用了一个函数进行局部变量的控制。

同样的，这里我用了几个变量。我一个个的来解释。

1：第一个变量【var dr = document.getElementById("dr");】

获取id为dr的标签的信息（其实就是上面我提交按钮的id）并将其变量继续定义为dr

2：第二，三个变量【var username_text = document.getElementById("dr_username").value; 】

【var password_text = document.getElementById("dr_password").value;】

和上面注册的一样，这里的变量我是为了获取输入文本框里面的信息，并将变量名为username_text和password_text。

3：第四，五个变量【var user_name = localStorage.getItem("username");】

【var user_password = localStorage.getItem("password");】

这两个变量是利用localStorage.getItem（“名”）进行查找刚刚我们在注册界面注册的账号和密码，并将其找到的信息保存在变量名为user_name和user_password的变量里面。

接下来，我用一个if语句来判断我所输入的文本信息和我刚刚注册的，也就是我利用localStorage.getItem（“名”）所匹配到的信息是否一致。

接下来，让我们看一下实现的效果。

不足：

这种代码的实现是很简单的，只要学了JS的本地储存就可以学会，但是这样还是有很大的不足。

1：只编辑一个username（账号）变量和一个password（密码）变量的话，如果第一个人注册了后，第二个人需要再次注册，就会把第一个人注册的账号和密码覆盖掉，那么第一个人注册的信息就没有了。

这里我储存的账号和密码是：123456和123456

而当我再次注册的时候，数据就会被覆盖，这是我第二次注册的账号和密码123456和12300

2：这种账号和密码的保存是在本地，无法上传服务器。

3：容易被别人发现。

改进：

这里，如果需要全部完善可能需要用到数据库以及其他的知识，但是我还没有学，所以，目前只能解决第一个不足（还不是完全的可以解决，如果有大佬希望可以Q我一下）【主要是JS方面的改进】

var zhuce = document.getElementById("zhuce");
        var i = 0;
        zhuce.addEventListener("click",function(){
            i = i+1;
        })
        function save_date(){
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            var first_username = localStorage.getItem("username");
            var first_password = localStorage.getItem("password");
            if(first_password == "" && first_username == ""){
                localStorage.setItem("username",username);
                localStorage.setItem("password",password);
            }else{
                localStorage.setItem("username"+i,username);
                localStorage.setItem("password"+i,password);
            }
        }

这里我多加了一个变量 i ，以及一个“事件”接下来，我也一个个的解析。

第一：var zhuce = document.getElementById("zhuce");
var i = 0;
zhuce.addEventListener("click",function(){
i = i+1;
})

这里我先获取了一下id名为zhuce的按钮，然后编辑了一个名为 i 的变量，使他赋值为0。然后用一个点击事件click表示，每当我点击一下注册按钮，那么事件就会执行一次，而这里的事件就是后面的function（）函数的内容，也就是i++。前面的“click”就是这次的事件名称（是js内部函数）

第二： function save_date(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var first_username = localStorage.getItem("username");
var first_password = localStorage.getItem("password");

和上面一样，获取了文本框的信息内容，并赋值给变量username和password。然后利用localStorage.getItem函数进行数据匹配，并赋值给first_username和first_password两个变量。

第三：if(first_password == "" && first_username == ""){
localStorage.setItem("username",username);
localStorage.setItem("password",password);
}else{
localStorage.setItem("username"+i,username);
localStorage.setItem("password"+i,password);
}

这里，我首先利用一个if语句判断，我的本地储存数据里面是否存在first_name和first_password的key。如果为空集，那么就执行if里面的条件表达式，也就是以username和password为名的数据保存。如果已经存在了，那么就进行else里面的条件表达式。还记得上面我们定义的一个 i 变量吗？这里就起作用了，如果Username和password已经存在，那么执行后面的语句，也就是在username和password后面在加上一个 i 的变量，而这个 i 是什么呢？就是每次点击一次注册按钮 i 就会进行+1的事件活动，所以这里我们就可以通过这样的一种形式，可以将好多个信息保存了下来。

接下来我们来看看。