ログインジャンプページ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 id="Login-Redirect-Page">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 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>

このログインページでは、ユーザー名とパスワードの入力ボックスと送信ボタンを含むフォームを作成しました。ユーザーが「ログイン」ボタンをクリックすると、入力したユーザー名とパスワードがセッションストレージに保存され、ユーザーは「homepage.html」のページというウィンドウにリダイレクトされます。

ジャンプページの実装

最初のステップでは、「login-redirect.html」という名前の空の HTML ページを作成しました。次に、ページの読み込み時にユーザーがすでにログインしているかどうかを確認し、ログインステータスに基づいて正しいページにリダイレクトする JavaScript スクリプトを追加する必要があります。

以下は、この機能を実装する簡単な JavaScript の例です:

<!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>

このスクリプトでは、まずユーザー名とパスワードがセッションストレージに存在するかどうかを確認することで、ユーザーがログインしているかどうかを判断します。。ユーザーがログインしていない場合は、「login.html」というログインページにリダイレクトし、ログインしていない場合は、「homepage.html」というページにリダイレクトします。

ログインジャンプページのテスト

これで、ログインジャンプページの HTML と JavaScript コードの作成が完了しました。これらのページをローカルまたはリモートサーバーで起動し、ログインリダイレクト機能が正しく完了することを確認するためにテストできます。

まず、ユーザー名とパスワードを入力せずに「homepage.html」ページにアクセスして、ログインページにリダイレクトされるかどうかを確認します。その後、ログインページに任意のユーザー名とパスワードを入力し、それがセッションストレージに正しく保存され、「homepage.html」ページにリダイレクトされるかどうかを確認します。

概要

この記事では、HTML と JavaScript を使用してログインジャンプページを実装する方法を紹介しました。まず空のジャンプページを作成し、そのページに JavaScript コードを記述して、ページの読み込み時にユーザーがログインしているかどうかを確認し、正しいページにリダイレクトします。その後、ログインフォームを含む HTML ページを作成し、そこに JavaScript コードを追加して、ユーザーが「ログイン」ボタンをクリックしたときに入力したユーザー名とパスワードをセッションストレージに保存し、ジャンプターンページにリダイレクトしました。最後に、これらのページをローカルまたはリモートサーバーで起動してテストすることにより、ログインリダイレクト機能が正しく完了していることを確認します。

以上がログインジャンプページhtmlの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Golang in Action：実際の例とアプリケーションApr 12, 2025 am 12:11 AM

Golangは実際のアプリケーションに優れており、そのシンプルさ、効率性、並行性で知られています。 1）同時プログラミングはゴルチンとチャネルを通じて実装されます。2）柔軟なコードは、インターフェイスと多型を使用して記述されます。3）ネット/HTTPパッケージを使用したネットワークプログラミングを簡素化、4）効率的な同時クローラーを構築する、5）ツールと最高の実践を通じてデバッグと最適化。

Golang：Goプログラミング言語が説明しましたApr 10, 2025 am 11:18 AM

GOのコア機能には、ガベージコレクション、静的リンク、並行性サポートが含まれます。 1. GO言語の並行性モデルは、GoroutineとChannelを通じて効率的な同時プログラミングを実現します。 2.インターフェイスと多型は、インターフェイスメソッドを介して実装されているため、異なるタイプを統一された方法で処理できます。 3.基本的な使用法は、関数定義と呼び出しの効率を示しています。 4。高度な使用法では、スライスは動的なサイズ変更の強力な機能を提供します。 5.人種条件などの一般的なエラーは、Getest Raceを通じて検出および解決できます。 6.パフォーマンス最適化Sync.Poolを通じてオブジェクトを再利用して、ゴミ収集圧力を軽減します。

Golangの目的：効率的でスケーラブルなシステムの構築Apr 09, 2025 pm 05:17 PM

GO言語は、効率的でスケーラブルなシステムの構築においてうまく機能します。その利点には次のものがあります。1。高性能：マシンコードにコンパイルされ、速度速度が速い。 2。同時プログラミング：ゴルチンとチャネルを介してマルチタスクを簡素化します。 3。シンプルさ：簡潔な構文、学習コストとメンテナンスコストの削減。 4。クロスプラットフォーム：クロスプラットフォームのコンパイル、簡単な展開をサポートします。

SQLソートのステートメントによる順序の結果がランダムに見えるのはなぜですか？Apr 02, 2025 pm 05:24 PM

SQLクエリの結果の並べ替えについて混乱しています。 SQLを学習する過程で、しばしば混乱する問題に遭遇します。最近、著者は「Mick-SQL Basics」を読んでいます...

テクノロジースタックの収束は、テクノロジースタック選択のプロセスにすぎませんか？Apr 02, 2025 pm 05:21 PM

テクノロジースタックの収束とテクノロジーの選択の関係ソフトウェア開発におけるテクノロジーの選択、テクノロジースタックの選択と管理は非常に重要な問題です。最近、一部の読者が提案しています...

Golang Mutexの不適切な使用は「致命的なエラー：同期：ロック解除されたMutexのロックを解除する」エラーを引き起こしますか？この問題を避ける方法は？Apr 02, 2025 pm 05:18 PM

ゴーラン...

反射比較を使用し、GOの3つの構造の違いを処理する方法は？Apr 02, 2025 pm 05:15 PM

GO言語で3つの構造を比較および処理する方法。 GOプログラミングでは、2つの構造の違いを比較し、これらの違いを...

Goでグローバルにインストールされたパッケージを表示する方法は？Apr 02, 2025 pm 05:12 PM

Goでグローバルにインストールされたパッケージを表示する方法は？ GO言語で開発する過程で、GOはしばしば使用します...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。