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

目录

案例需求

实现思路

代码参考

login.html

register.html

运行效果

升级思路


案例需求

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

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

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

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

实现思路

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

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

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

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

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

代码参考

login.html

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

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博客

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

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

相关推荐
Yana.nice2 小时前
Bash函数详解
开发语言·chrome·bash
阿芯爱编程3 小时前
2025前端面试题
前端·面试
江沉晚呤时3 小时前
在 C# 中调用 Python 脚本:实现跨语言功能集成
python·microsoft·c#·.net·.netcore·.net core
电脑能手4 小时前
如何远程访问在WSL运行的Jupyter Notebook
ide·python·jupyter
前端小趴菜054 小时前
React - createPortal
前端·vue.js·react.js
tomorrow.hello4 小时前
Java并发测试工具
java·开发语言·测试工具
Edward-tan4 小时前
CCPD 车牌数据集提取标注,并转为标准 YOLO 格式
python
晓13134 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
老胖闲聊4 小时前
Python I/O 库【输入输出】全面详解
开发语言·python
倔强青铜三4 小时前
苦练Python第18天:Python异常处理锦囊
人工智能·python·面试