Log masuk lompat halaman html
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Apakah kelemahan debian openssl
Apr 02, 2025 am 07:30 AM
OpenSSL, sebagai perpustakaan sumber terbuka yang digunakan secara meluas dalam komunikasi yang selamat, menyediakan algoritma penyulitan, kunci dan fungsi pengurusan sijil. Walau bagaimanapun, terdapat beberapa kelemahan keselamatan yang diketahui dalam versi sejarahnya, yang sebahagiannya sangat berbahaya. Artikel ini akan memberi tumpuan kepada kelemahan umum dan langkah -langkah tindak balas untuk OpenSSL dalam sistem Debian. Debianopenssl yang dikenal pasti: OpenSSL telah mengalami beberapa kelemahan yang serius, seperti: Kerentanan Pendarahan Jantung (CVE-2014-0160): Kelemahan ini mempengaruhi OpenSSL 1.0.1 hingga 1.0.1f dan 1.0.2 hingga 1.0.2 versi beta. Penyerang boleh menggunakan kelemahan ini untuk maklumat sensitif baca yang tidak dibenarkan di pelayan, termasuk kunci penyulitan, dll.
Perpustakaan apa yang digunakan untuk operasi nombor terapung di GO?
Apr 02, 2025 pm 02:06 PM
Perpustakaan yang digunakan untuk operasi nombor terapung dalam bahasa Go memperkenalkan cara memastikan ketepatannya ...
Apakah masalah dengan thread giliran di crawler colly go?
Apr 02, 2025 pm 02:09 PM
Masalah Threading Giliran di GO Crawler Colly meneroka masalah menggunakan Perpustakaan Colly Crawler dalam bahasa Go, pemaju sering menghadapi masalah dengan benang dan permintaan beratur. � ...
Kaedah Pemantauan PostgreSQL di bawah Debian
Apr 02, 2025 am 07:27 AM
Artikel ini memperkenalkan pelbagai kaedah dan alat untuk memantau pangkalan data PostgreSQL di bawah sistem Debian, membantu anda memahami pemantauan prestasi pangkalan data sepenuhnya. 1. Gunakan PostgreSQL untuk membina pemantauan PostgreSQL sendiri menyediakan pelbagai pandangan untuk pemantauan aktiviti pangkalan data: PG_STAT_ACTIVITY: Memaparkan aktiviti pangkalan data dalam masa nyata, termasuk sambungan, pertanyaan, urus niaga dan maklumat lain. PG_STAT_REPLITI: Memantau status replikasi, terutamanya sesuai untuk kluster replikasi aliran. PG_STAT_DATABASE: Menyediakan statistik pangkalan data, seperti saiz pangkalan data, masa komitmen/masa rollback transaksi dan petunjuk utama lain. 2. Gunakan alat analisis log pgbadg
Berubah dari front-end ke pembangunan back-end, adakah lebih menjanjikan untuk belajar Java atau Golang?
Apr 02, 2025 am 09:12 AM
Laluan Pembelajaran Backend: Perjalanan Eksplorasi dari Front-End ke Back-End sebagai pemula back-end yang berubah dari pembangunan front-end, anda sudah mempunyai asas Nodejs, ...
Di Go, mengapa rentetan percetakan dengan fungsi println dan rentetan () mempunyai kesan yang berbeza?
Apr 02, 2025 pm 02:03 PM
Perbezaan antara percetakan rentetan dalam bahasa Go: perbezaan kesan menggunakan fungsi println dan rentetan () sedang ...
Bagaimana menyelesaikan masalah penukaran jenis user_id semasa menggunakan aliran redis untuk melaksanakan beratur mesej dalam bahasa Go?
Apr 02, 2025 pm 04:54 PM
Masalah menggunakan redisstream untuk melaksanakan beratur mesej dalam bahasa Go menggunakan bahasa Go dan redis ...
Bagaimana cara menentukan pangkalan data yang berkaitan dengan model dalam beego orm?
Apr 02, 2025 pm 03:54 PM
Di bawah rangka kerja beegoorm, bagaimana untuk menentukan pangkalan data yang berkaitan dengan model? Banyak projek beego memerlukan pelbagai pangkalan data untuk dikendalikan secara serentak. Semasa menggunakan beego ...
