目录
案例需求
需要一个登录界面和注册页面实现一个较为完整的登录注册功能
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博客
账号注册数据只是进行一次性储存，当重新运行该页面的时候会清空。如何储存账户密码或者检测账户重复注册的问题等。
这个是我灵光一闪思考想到对前面的简单案例升级，不满足将用户名写死，导致登录不灵活的问题。希望本篇文章对你有提升，同时也是记录我成长的对案例思考的方式。