Login jump page html

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 09, 2023 am 10:48 AM

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 id="Login-Redirect-Page">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 id="Login-Page">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".

Implementing the jump page

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 id="Login-Redirect-Page">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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Golang vs. Python: The Pros and ConsApr 21, 2025 am 12:17 AM

Golangisidealforbuildingscalablesystemsduetoitsefficiencyandconcurrency,whilePythonexcelsinquickscriptinganddataanalysisduetoitssimplicityandvastecosystem.Golang'sdesignencouragesclean,readablecodeanditsgoroutinesenableefficientconcurrentoperations,t

Golang and C : Concurrency vs. Raw SpeedApr 21, 2025 am 12:16 AM

Golang is better than C in concurrency, while C is better than Golang in raw speed. 1) Golang achieves efficient concurrency through goroutine and channel, which is suitable for handling a large number of concurrent tasks. 2)C Through compiler optimization and standard library, it provides high performance close to hardware, suitable for applications that require extreme optimization.

Why Use Golang? Benefits and Advantages ExplainedApr 21, 2025 am 12:15 AM

Reasons for choosing Golang include: 1) high concurrency performance, 2) static type system, 3) garbage collection mechanism, 4) rich standard libraries and ecosystems, which make it an ideal choice for developing efficient and reliable software.

Golang vs. C : Performance and Speed ComparisonApr 21, 2025 am 12:13 AM

Golang is suitable for rapid development and concurrent scenarios, and C is suitable for scenarios where extreme performance and low-level control are required. 1) Golang improves performance through garbage collection and concurrency mechanisms, and is suitable for high-concurrency Web service development. 2) C achieves the ultimate performance through manual memory management and compiler optimization, and is suitable for embedded system development.

Is Golang Faster Than C ? Exploring the LimitsApr 20, 2025 am 12:19 AM

Golang performs better in compilation time and concurrent processing, while C has more advantages in running speed and memory management. 1.Golang has fast compilation speed and is suitable for rapid development. 2.C runs fast and is suitable for performance-critical applications. 3. Golang is simple and efficient in concurrent processing, suitable for concurrent programming. 4.C Manual memory management provides higher performance, but increases development complexity.

Golang: From Web Services to System ProgrammingApr 20, 2025 am 12:18 AM

Golang's application in web services and system programming is mainly reflected in its simplicity, efficiency and concurrency. 1) In web services, Golang supports the creation of high-performance web applications and APIs through powerful HTTP libraries and concurrent processing capabilities. 2) In system programming, Golang uses features close to hardware and compatibility with C language to be suitable for operating system development and embedded systems.

Golang vs. C : Benchmarks and Real-World PerformanceApr 20, 2025 am 12:18 AM

Golang and C have their own advantages and disadvantages in performance comparison: 1. Golang is suitable for high concurrency and rapid development, but garbage collection may affect performance; 2.C provides higher performance and hardware control, but has high development complexity. When making a choice, you need to consider project requirements and team skills in a comprehensive way.

Golang vs. Python: A Comparative AnalysisApr 20, 2025 am 12:17 AM

Golang is suitable for high-performance and concurrent programming scenarios, while Python is suitable for rapid development and data processing. 1.Golang emphasizes simplicity and efficiency, and is suitable for back-end services and microservices. 2. Python is known for its concise syntax and rich libraries, suitable for data science and machine learning.

See all articles