로그인 점프 페이지 HTML
- WBOY원래의
- 2023-05-09 10:48:372333검색
웹 개발에서 로그인 점프 페이지는 일반적인 기능입니다. 사용자가 한 번 로그인한 후에는 사용자가 웹사이트 콘텐츠를 쉽게 탐색하고 새 페이지를 방문할 때마다 로그인 정보를 다시 입력할 필요가 없도록 하기 위해 일반적으로 사용자의 정보를 저장하는 점프 페이지를 설계합니다. 사용자가 웹사이트에서 콘텐츠를 계속 탐색할 수 있도록 세션의 로그인 정보입니다.
이 글에서는 HTML과 JavaScript를 사용하여 로그인 점프 페이지를 구현하는 방법을 소개하겠습니다.
- HTML 페이지 만들기
먼저 HTML 페이지를 만들어야 합니다. 코드 편집기에서 직접 빈 HTML 파일을 만든 후 다음 코드를 추가할 수 있습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Login Redirect Page</title> </head> <body> <h1>Login Redirect Page</h1> <p>Please wait while you are being redirected...</p> </body> </html>
이 HTML 페이지에서는 제목과 프롬프트 메시지를 만들었습니다. 이 기능은 다른 페이지에 추가될 예정이므로 이 페이지에는 로그인 양식이 포함되어 있지 않습니다.
- 로그인 페이지 만들기
다음으로 로그인 페이지를 만들어야 합니다. 동일한 HTML 파일에 계속해서 코드를 작성하거나 새 HTML 파일을 만들고 코드를 복사하여 붙여넣을 수 있습니다. 다음은 간단한 로그인 양식의 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit" onclick="login()">Login</button>
</form>
<script>
function login() {
// Get the input fields
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// Set the session storage values
sessionStorage.setItem("username", username);
sessionStorage.setItem("password", password);
// Redirect to the homepage
window.location.replace("homepage.html");
}
</script>
</body>
</html> 이 로그인 페이지에서는 사용자 이름과 비밀번호 입력 상자 및 제출 버튼이 있는 양식을 만들었습니다. 사용자가 "로그인" 버튼을 클릭하면 세션 저장소에 입력한 사용자 이름과 비밀번호를 저장한 다음 JavaScript의 window.location.replace() 기능을 통해 사용자를 "homepage.html"이라는 페이지로 리디렉션합니다.
- 점프 페이지 구현
첫 번째 단계에서는 "login-redirect.html"이라는 빈 HTML 페이지를 만들었습니다. 이제 페이지가 로드될 때 사용자가 이미 로그인되어 있는지 확인하고 로그인 상태에 따라 올바른 페이지로 리디렉션하는 JavaScript 스크립트를 추가해야 합니다.
다음은 이 기능을 구현하는 간단한 JavaScript 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Redirect Page</title>
</head>
<body>
<h1>Login Redirect Page</h1>
<p>Please wait while you are being redirected...</p>
<script>
// Check if the user is logged in
var username = sessionStorage.getItem("username");
var password = sessionStorage.getItem("password");
if (username == null || password == null) {
// Redirect to the login page
window.location.replace("login.html");
} else {
// Redirect to the homepage
window.location.replace("homepage.html");
}
</script>
</body>
</html>이 스크립트에서는 먼저 사용자 이름과 비밀번호가 세션 저장소에 있는지 확인하여 사용자가 로그인했는지 확인합니다. 사용자가 로그인되어 있지 않으면 "login.html"이라는 로그인 페이지로 리디렉션하고, 그렇지 않으면 "homepage.html"이라는 페이지로 리디렉션합니다.
- 로그인 점프 페이지 테스트
이제 로그인 점프 페이지에 대한 HTML 및 JavaScript 코드 작성이 완료되었습니다. 로컬 또는 원격 서버에서 이러한 페이지를 시작하고 테스트하여 로그인 리디렉션 기능이 올바르게 완료되는지 확인할 수 있습니다.
먼저 사용자 이름과 비밀번호를 입력하지 않고 "homepage.html" 페이지에 액세스하여 로그인 페이지로 리디렉션되는지 확인할 수 있습니다. 그런 다음 로그인 페이지에 임의의 사용자 이름과 비밀번호를 입력하고 해당 정보가 세션 저장소에 올바르게 저장되고 "homepage.html" 페이지로 리디렉션되는지 확인할 수 있습니다.
요약
이 글에서는 HTML과 JavaScript를 사용하여 로그인 점프 페이지를 구현하는 방법을 소개했습니다. 먼저 빈 점프 페이지를 만들고 여기에 JavaScript 코드를 작성하여 페이지가 로드될 때 사용자가 로그인했는지 확인하고 올바른 페이지로 리디렉션했습니다. 그런 다음 로그인 양식이 포함된 HTML 페이지를 만들고 여기에 JavaScript 코드를 추가하여 사용자가 "로그인" 버튼을 클릭할 때 세션 저장소에 입력한 사용자 이름과 비밀번호를 저장하고 점프 턴 페이지로 리디렉션했습니다. 마지막으로 로컬 또는 원격 서버에서 이러한 페이지를 시작하고 테스트하여 로그인 리디렉션 기능을 올바르게 완료하는지 확인합니다.
위 내용은 로그인 점프 페이지 HTML의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!