Login jump page html-Golang-php.cn

WBOY

Release： 2023-05-09 10:48:37

Original

2330 people have browsed it

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>

Copy after login

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>

Copy after login

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

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>

Copy after login

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!