웹 개발에서 로그인 점프 페이지는 일반적인 기능입니다. 사용자가 한 번 로그인한 후에는 사용자가 웹사이트 콘텐츠를 쉽게 탐색하고 새 페이지를 방문할 때마다 로그인 정보를 다시 입력할 필요가 없도록 하기 위해 일반적으로 사용자의 정보를 저장하는 점프 페이지를 설계합니다. 사용자가 웹사이트에서 콘텐츠를 계속 탐색할 수 있도록 세션의 로그인 정보입니다.

이 글에서는 HTML과 JavaScript를 사용하여 로그인 점프 페이지를 구현하는 방법을 소개하겠습니다.

HTML 페이지 만들기

먼저 HTML 페이지를 만들어야 합니다. 코드 편집기에서 직접 빈 HTML 파일을 만든 후 다음 코드를 추가할 수 있습니다.

Login Redirect Page

Please wait while you are being redirected...

로그인 후 복사

이 HTML 페이지에서는 제목과 프롬프트 메시지를 만들었습니다. 이 기능은 다른 페이지에 추가될 예정이므로 이 페이지에는 로그인 양식이 포함되어 있지 않습니다.

로그인 페이지 만들기

다음으로 로그인 페이지를 만들어야 합니다. 동일한 HTML 파일에 계속해서 코드를 작성하거나 새 HTML 파일을 만들고 코드를 복사하여 붙여넣을 수 있습니다. 다음은 간단한 로그인 양식의 예입니다.

    Login Page 
  Login Page
  Username: 

 Password:

로그인 후 복사

이 로그인 페이지에서는 사용자 이름과 비밀번호 입력 상자 및 제출 버튼이 있는 양식을 만들었습니다. 사용자가 "로그인" 버튼을 클릭하면 세션 저장소에 입력한 사용자 이름과 비밀번호를 저장한 다음 JavaScript의window.location.replace()기능을 통해 사용자를 "homepage.html"이라는 페이지로 리디렉션합니다.

점프 페이지 구현

첫 번째 단계에서는 "login-redirect.html"이라는 빈 HTML 페이지를 만들었습니다. 이제 페이지가 로드될 때 사용자가 이미 로그인되어 있는지 확인하고 로그인 상태에 따라 올바른 페이지로 리디렉션하는 JavaScript 스크립트를 추가해야 합니다.

다음은 이 기능을 구현하는 간단한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!