html实现登录与注册功能案例（不写死且只使用js）

目录

案例需求

实现思路

代码参考

login.html

register.html

运行效果

升级思路

---

案例需求

需要一个登录界面和注册页面实现一个较为完整的登录注册功能

1.登录界面没有登录限制需求（降低难度），实现基本的登录判断需求，弹窗出现登录失败和登录成功就行了

2.当点击登录界面里面的注册按钮，跳转到注册页面

3.注册页点击注册，弹窗出现注册成功并跳转回登录页面就行了，不做账户重复注册等其他判断（降低难度）

实现思路

界面就很简单，两个界面都用<input>实现用户名和密码的输入框，登录界面之比注册页面多一个登录按钮。

在登录界面点击登录按钮触发事件判断实现账户密码判断。

点击注册按钮，绑定事件，使用window.location.href方法绑定跳转页面，实现页面跳转。

在注册页面需要使用**sessionStorage.setItem（）**来传递数据

登录界面需要使用**sessionStorage.getItem（）**来接受注册界面传递过来的数据

代码参考

login.html

用户名:<input type="text" id="username">
密码:<input type="password" id="password">
<button onclick="login()">登录</button>
<button onclick="register()">注册</button>
<script>
    const username01 = sessionStorage.getItem("username");
    const password01 = sessionStorage.getItem("password");
    function login() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        if (username === username01 && password === password01) {
            alert("登录成功");
        }
        else {
            alert("登录失败");
        }
    }
    function register() {
        window.location.href = "zhuce.html";
    }
</script>

register.html

<div>欢迎来到注册页面</div>
<div>用户名:<input type="text" id="username"></div>
<div>密码:<input type="password" id="password"></div>
<div><button onclick="register()">注册</button></div>
<script>
    let map = new Map();
     function register() {
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        if (username!=null && password!=null){
            map.set("username",username);
            map.set("password",password);

            // console.log(map.get("username"));
            // console.log(map.get("password"));

            sessionStorage.setItem("username",map.get("username"));
            sessionStorage.setItem("password",map.get("password"));
            window.location.href = "login.html";
            alert("注册成功")
        }
        else{
            alert("请填写用户名和密码")
        }
    }

</script>

运行效果

升级思路

可不可以限制登录次数进行死锁？如有需要参考html使用JS实现账号密码登录的简单案例_html<script>标签验证账号密码框的代码-CSDN博客

账号注册数据只是进行一次性储存，当重新运行该页面的时候会清空。如何储存账户密码或者检测账户重复注册的问题等。

这个是我灵光一闪思考想到对前面的简单案例升级，不满足将用户名写死，导致登录不灵活的问题。希望本篇文章对你有提升，同时也是记录我成长的对案例思考的方式。