ホームページ > 記事 > バックエンド開発 > ログインジャンプページhtml

ログインジャンプページhtml

WBOYオリジナル: 2023-05-09 10:48:372280ブラウズ

Web 開発では、ログインジャンプページは一般的な機能です。ユーザーが一度ログインした後は、ユーザーが Web サイトのコンテンツを閲覧しやすくし、新しいページにアクセスするたびにログイン情報を再入力する必要を避けるために、通常、ユーザーの情報を保存するジャンプページを設計します。ユーザーが Web サイト上のコンテンツの閲覧を継続できるように、セッション内のログイン情報を保存します。

この記事では、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>

このログインページでは、ユーザー名とパスワードの入力ボックスと送信ボタンを含むフォームを作成しました。ユーザーが「ログイン」ボタンをクリックすると、入力したユーザー名とパスワードがセッションストレージに保存され、ユーザーは「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 中国語 Web サイトの他の関連記事を参照してください。

JavaScript html location

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTMLで画像をリンクする方法次の記事：HTMLで画像をリンクする方法

続きを見る