No one comes to your website to be entertained. They have questions they think you can answer. Content answers questions.
― Jay Baer
我們將三個頁面所對應到的三個JS檔案全部分檔撰寫，總共會有六個檔案，這樣比較方便管理：
<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>
<body>
<h1>Login</h1>
<!-- login-->
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button id="loginBtn">Login</button>
<p>Don't have an account? <a href="register.html">Register here</a></p>
<!-- JavaScript file -->
<script src="login.js"></script>
</body>
</html>
// login.js
document.getElementById('loginBtn').addEventListener('click', () =>{
const enteredUsername = document.getElementById('username').value;
const enteredPassword = document.getElementById('password').value;
// Retrieve stored username and password from local storage
const storedUsername = localStorage.getItem('username');
const storedPassword = localStorage.getItem('password');
// Validate credentials
if (enteredUsername === storedUsername && enteredPassword === storedPassword) {
alert('Login successful!');
localStorage.setItem('loggedInUsername', enteredUsername);
// Redirect to main.html
window.location.href = 'main.html';
} else {
alert('Invalid credentials. Please try again.');
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
</head>
<body>
<h1>Register</h1>
<!-- registration-->
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button id="registerBtn">Register</button>
<p>Already have an account? <a href="login.html">Login here</a></p>
<!-- JavaScript file -->
<script src="register.js"></script>
</body>
</html>
// register.js
document.getElementById('registerBtn').addEventListener('click', () => {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username == "" || password == ""){
alert("Username or Password can not be empty!");
return;
}
// Store user data in local storage
localStorage.setItem('username', username);
localStorage.setItem('password', password);
alert("Registration Success!");
window.location.href = 'login.html';
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1 id="welcomeMsg"></h1>
<script src="main.js"></script>
</body>
</html>
const loggedInUsername = localStorage.getItem('loggedInUsername');
if (loggedInUsername) {
document.getElementById('welcomeMsg').textContent = `Your Grace, ${loggedInUsername}!`;
} else {
console.log('User not logged in.');
}
可以看到我們使用了昨天結尾說到的localStroage這個東西，它可以把資料存放在瀏覽器中，這樣我們就算頁面刷新，帳密也不會消失！
右鍵→檢查→ >> → Application → Storage → Local storage 就可以看到我們存放的username和password！
[JavaScript] Cookie、LocalStorage、SessionStorage 差異 | by Peggy Chan | Medium
我們可以也可以補一個按鈕去清除LocalStorage的內容：
localStorage.removeItem('username');
localStorage.removeItem('password');
試試使用CSS美化吧！
下一篇進入小結！
iThome鐵人賽
看影片追技術