Home > Article > Backend Development > Login jump page html
Login jump page html
- WBOYOriginal
- 2023-05-09 10:48:372280browse
In web development, login jump page is a common function. After the user logs in once, in order to facilitate the user to browse the website content and avoid the need for the user to re-enter the login information every time he visits a new page, we usually design a jump page to save the user's login information in a session so that the user can Continue browsing content on the website.
In this article, we will introduce how to use HTML and JavaScript to implement a login jump page.
- Create HTML page
First, we need to create an HTML page. You can create a blank HTML file directly in the code editor, and then add the following code:
<!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>
In this HTML page, we created a title and a prompt message. This page does not contain any login form as we will add this functionality in another page.
- Create a login page
Next, we need to create a login page. You can continue writing code in the same HTML file, or create a new HTML file and copy-paste the code into it. Here is a simple login form example:
<!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> In this login page, we have created a form that contains username and password input boxes and a submit button. When the user clicks the "Login" button, we save the username and password they entered in session storage, and then redirect the user to a window called The page of "homepage.html".
- In the first step, we created a blank HTML page named "login-redirect.html". Now we need to add a JavaScript script in it that when the page loads checks if the user is already logged in and redirects them to the correct page based on the logged in status.
The following is a simple JavaScript example that implements this functionality:
<!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>In this script, we first determine whether the user is logged in by checking whether the username and password exist in the session storage. If the user is not logged in, redirect them to a login page called "login.html"; otherwise, redirect them to a page called "homepage.html".
Test the login jump page- Now, we have completed writing the HTML and JavaScript code for the login jump page. We can launch these pages on a local or remote server and test them to ensure they complete the login redirect function correctly.
We can first try to access our "homepage.html" page without entering the username and password and check if it redirects to the login page. Afterwards, we can enter an arbitrary username and password into the login page and check if it is correctly saved in the session storage and redirected to the "homepage.html" page.
Summary
In this article, we introduced how to use HTML and JavaScript to implement a login jump page. We first created a blank jump page and wrote JavaScript code on it to check if the user is logged in when the page loads and redirect them to the correct page. After that, we created an HTML page containing the login form and added JavaScript code in it to save the username and password entered by the user in the session storage when they click on the "Login" button and redirect them to the jump Turn page. Finally, we make sure they complete the login redirect function correctly by launching these pages on a local or remote server and testing them.
The above is the detailed content of Login jump page html. For more information, please follow other related articles on the PHP Chinese website!