ログインジャンプページhtml-Golang-php.cn

ホームページ

バックエンド開発

Golang

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 09, 2023 am 10:48 AM

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」のページというウィンドウにリダイレクトされます。

ジャンプページの実装

以下は、この機能を実装する簡単な 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1664

CakePHP チュートリアル

1423

Laravel チュートリアル

1317

PHP チュートリアル

1268

C# チュートリアル

1248

Related knowledge

Golang vs. Python：パフォーマンスとスケーラビリティ Apr 19, 2025 am 12:18 AM

Golangは、パフォーマンスとスケーラビリティの点でPythonよりも優れています。 1）Golangのコンピレーションタイプの特性と効率的な並行性モデルにより、高い並行性シナリオでうまく機能します。 2）Pythonは解釈された言語として、ゆっくりと実行されますが、Cythonなどのツールを介してパフォーマンスを最適化できます。

Golang and C：Concurrency vs. Raw Speed Apr 21, 2025 am 12:16 AM

Golangは並行性がCよりも優れていますが、Cは生の速度ではGolangよりも優れています。 1）Golangは、GoroutineとChannelを通じて効率的な並行性を達成します。これは、多数の同時タスクの処理に適しています。 2）Cコンパイラの最適化と標準ライブラリを介して、極端な最適化を必要とするアプリケーションに適したハードウェアに近い高性能を提供します。

Golangの影響：速度、効率、シンプルさ Apr 14, 2025 am 12:11 AM

speed、効率、およびシンプル性をspeedsped.1）speed：gocompilesquilesquicklyandrunseffictient、理想的なlargeprojects.2）効率：等系dribribraryreducesexexternaldedenciess、開発効果を高める3）シンプルさ：

Golang vs. Python：重要な違いと類似点 Apr 17, 2025 am 12:15 AM

GolangとPythonにはそれぞれ独自の利点があります。Golangは高性能と同時プログラミングに適していますが、PythonはデータサイエンスとWeb開発に適しています。 Golangは同時性モデルと効率的なパフォーマンスで知られていますが、Pythonは簡潔な構文とリッチライブラリエコシステムで知られています。

Golang vs. C：パフォーマンスと速度の比較 Apr 21, 2025 am 12:13 AM

Golangは迅速な発展と同時シナリオに適しており、Cは極端なパフォーマンスと低レベルの制御が必要なシナリオに適しています。 1）Golangは、ごみ収集と並行機関のメカニズムを通じてパフォーマンスを向上させ、高配列Webサービス開発に適しています。 2）Cは、手動のメモリ管理とコンパイラの最適化を通じて究極のパフォーマンスを実現し、埋め込みシステム開発に適しています。

GolangとC：パフォーマンスのトレードオフ Apr 17, 2025 am 12:18 AM

GolangとCのパフォーマンスの違いは、主にメモリ管理、コンピレーションの最適化、ランタイム効率に反映されています。 1）Golangのゴミ収集メカニズムは便利ですが、パフォーマンスに影響を与える可能性があります。

CとGolang：パフォーマンスが重要な場合 Apr 13, 2025 am 12:11 AM

Cは、ハードウェアリソースと高性能の最適化が必要なシナリオにより適していますが、Golangは迅速な開発と高い並行性処理が必要なシナリオにより適しています。 1.Cの利点は、ハードウェア特性と高い最適化機能に近いものにあります。これは、ゲーム開発などの高性能ニーズに適しています。 2.Golangの利点は、その簡潔な構文と自然な並行性サポートにあり、これは高い並行性サービス開発に適しています。