Rumah > Artikel > pembangunan bahagian belakang > Log masuk lompat halaman html

Log masuk lompat halaman html

WBOYasal: 2023-05-09 10:48:372327semak imbas

Dalam pembangunan web, halaman lompat log masuk ialah fungsi biasa. Selepas pengguna log masuk sekali, untuk memudahkan pengguna menyemak imbas kandungan laman web dan mengelakkan keperluan pengguna memasukkan semula maklumat log masuk setiap kali dia melawat halaman baharu, kami biasanya mereka bentuk halaman lompat untuk menyelamatkan pengguna. maklumat log masuk dalam sesi supaya pengguna boleh Teruskan menyemak imbas kandungan di tapak web.

Dalam artikel ini, kami akan memperkenalkan cara menggunakan HTML dan JavaScript untuk melaksanakan halaman lompat log masuk.

Membuat halaman HTML

Pertama, kita perlu mencipta halaman HTML. Anda boleh mencipta fail HTML kosong terus dalam editor kod, dan kemudian tambah kod berikut:

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

Dalam halaman HTML ini, kami mencipta tajuk dan mesej gesaan. Halaman ini tidak mengandungi sebarang borang log masuk kerana kami akan menambah fungsi ini di halaman lain.

Buat halaman log masuk

Seterusnya, kita perlu mencipta halaman log masuk. Anda boleh terus menulis kod dalam fail HTML yang sama, atau mencipta fail HTML baharu dan menyalin-tampal kod ke dalamnya. Berikut ialah contoh borang log masuk mudah:

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

Dalam halaman log masuk ini, kami telah mencipta borang yang mengandungi kotak input nama pengguna dan kata laluan serta butang hantar. Apabila pengguna mengklik butang "Log Masuk", kami menyimpan nama pengguna dan kata laluan yang mereka masukkan dalam storan sesi, dan kemudian mengubah hala pengguna ke halaman yang dipanggil "homepage.html" melalui fungsi window.location.replace() dalam JavaScript.

Melaksanakan halaman lompat

Dalam langkah pertama, kami mencipta halaman HTML kosong bernama "login-redirect.html". Sekarang kita perlu menambah skrip JavaScript di dalamnya yang apabila halaman dimuatkan menyemak sama ada pengguna sudah log masuk dan mengubah hala mereka ke halaman yang betul berdasarkan status log masuk.

Berikut ialah contoh JavaScript mudah yang melaksanakan fungsi ini:

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

Dalam skrip ini, kami mula-mula menentukan sama ada pengguna log masuk dengan menyemak sama ada nama pengguna dan kata laluan wujud dalam storan sesi. Jika pengguna tidak log masuk, ubah hala mereka ke halaman log masuk yang dipanggil "login.html" jika tidak, ubah hala mereka ke halaman yang dipanggil "homepage.html".

Menguji halaman lompat log masuk

Kini, kami telah selesai menulis kod HTML dan JavaScript untuk halaman lompat log masuk. Kami boleh melancarkan halaman ini pada pelayan setempat atau jauh dan mengujinya untuk memastikan halaman tersebut melengkapkan fungsi ubah hala log masuk dengan betul.

Kami boleh cuba mengakses halaman "homepage.html" kami dahulu tanpa memasukkan nama pengguna dan kata laluan dan menyemak sama ada ia mengubah hala ke halaman log masuk. Selepas itu, kami boleh memasukkan nama pengguna dan kata laluan sewenang-wenangnya ke dalam halaman log masuk dan menyemak sama ada ia disimpan dengan betul dalam storan sesi dan diubah hala ke halaman "homepage.html".

Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan HTML dan JavaScript untuk melaksanakan halaman lompat log masuk. Kami mula-mula membuat halaman lompat kosong dan menulis kod JavaScript padanya untuk menyemak sama ada pengguna log masuk apabila halaman dimuatkan dan mengubah hala mereka ke halaman yang betul. Selepas itu, kami mencipta halaman HTML yang mengandungi borang log masuk dan menambah kod JavaScript di dalamnya untuk menyimpan nama pengguna dan kata laluan yang dimasukkan oleh pengguna dalam storan sesi apabila mereka mengklik pada butang "Log Masuk" dan mengubah hala mereka ke halaman Jump Turn. Akhir sekali, kami memastikan mereka melengkapkan fungsi ubah hala log masuk dengan betul dengan melancarkan halaman ini pada pelayan setempat atau jauh dan mengujinya.

Atas ialah kandungan terperinci Log masuk lompat halaman html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html location

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk memautkan gambar dalam htmlArtikel seterusnya：Bagaimana untuk memautkan gambar dalam html

Artikel berkaitan

Lihat lagi