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

この記事では、HTMLとJavaScriptを使ってログインジャンプページを実装する方法を紹介します。

HTML ページの作成

まず、HTML ページを作成する必要があります。コードエディターで空の HTML ファイルを直接作成し、次のコードを追加できます。

Login Redirect Page

Please wait while you are being redirected...

ログイン後にコピー

この HTML ページでは、タイトルとプロンプトメッセージを作成しました。この機能は別のページに追加するため、このページにはログインフォームは含まれません。

ログインページの作成

次に、ログインページを作成する必要があります。同じ HTML ファイルにコードを書き続けることも、新しい HTML ファイルを作成してコードをコピーしてそこに貼り付けることもできます。簡単なログインフォームの例を次に示します。

    Login Page 
  Login Page
  Username: 

 Password:

ログイン後にコピー

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

ジャンプページの実装

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

Login Redirect Page

Please wait while you are being redirected...

ログイン後にコピー

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

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

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

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

概要

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

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