目錄

案例需求

實現思路

代碼參考

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

?賬號注冊數據只是進行一次性儲存，當重新運行該頁面的時候會清空。如何儲存賬戶密碼或者檢測賬戶重復注冊的問題等。

這個是我靈光一閃思考想到對前面的簡單案例升級，不滿足將用戶名寫死，導致登錄不靈活的問題。希望本篇文章對你有提升，同時也是記錄我成長的對案例思考的方式。