Sign in Subscribe
Javascript

Melanjutkan ke Halaman Berikutnya dengan History Forward

Melanjutkan ke Halaman Berikutnya dengan History Forward
Photo by Sigmund / Unsplash

Pernah nggak sih, kamu klik tombol "Back" di browser, lalu pengen balik lagi ke halaman berikutnya tanpa harus cari link atau ngetik ulang URL? Nah, di sinilah History API berperan, khususnya metode history.forward().

Fitur ini memungkinkan kita untuk melanjutkan ke halaman berikutnya dalam riwayat penelusuran browser, sama seperti tombol "Forward" di browser. Ini sangat berguna kalau kamu punya aplikasi berbasis navigasi halaman atau ingin memberikan kontrol lebih ke pengguna dalam menjelajahi situsmu.

Yuk, kita bahas gimana cara kerja history.forward(), bedanya dengan metode lain, dan contoh implementasinya dalam aplikasi web!

Apa Itu History API?

History API adalah bagian dari JavaScript yang memungkinkan kita mengelola riwayat penelusuran dalam sesi browser. Beberapa metode penting dalam API ini adalah:

  • history.back() → Kembali ke halaman sebelumnya.
  • history.forward() → Maju ke halaman berikutnya dalam riwayat.
  • history.go(n) → Melompat ke halaman dalam riwayat berdasarkan indeks n.
  • history.pushState() → Menambah entri ke dalam riwayat browser tanpa memuat ulang halaman.
  • history.replaceState() → Mengubah entri riwayat saat ini tanpa menambah entri baru.

Kalau history.back() itu buat mundur ke halaman sebelumnya, history.forward() ini kebalikannya.

Misalnya kamu ada di Halaman A, terus pergi ke Halaman B, lalu klik tombol "Back" buat kembali ke Halaman A. Nah, kalau kamu pakai history.forward(), kamu bakal langsung lanjut ke Halaman B lagi tanpa harus cari link atau ketik ulang URL.

Cara Menggunakan history.forward()

Metode history.forward() ini gampang banget dipakai. Begini cara simpelnya:

1. Pakai JavaScript untuk Navigasi ke Halaman Berikutnya

document.getElementById("forwardButton").addEventListener("click", function() {
    history.forward();
});

Kalau pengguna sebelumnya menekan tombol "Back", metode ini bakal mengarahkan mereka ke halaman berikutnya dalam riwayat browser.

2. Contoh Implementasi dalam HTML

Biar makin jelas, coba bikin tombol yang kalau diklik bakal lanjut ke halaman berikutnya:

<button id="forwardButton">Lanjut ke Halaman Berikutnya</button>
<script>
    document.getElementById("forwardButton").addEventListener("click", function() {
        history.forward();
    });
</script>

Kalau ada riwayat halaman sebelumnya, tombol ini bakal langsung navigasi ke halaman berikutnya.

Perbedaan history.forward(), history.go(1), dan history.back()

Kadang kita juga butuh metode lain buat navigasi. Ini perbedaan beberapa metode yang mirip:

Metode Fungsi
history.forward() Maju satu halaman ke depan dalam riwayat
history.go(1) Sama seperti history.forward(), maju satu halaman
history.back() Kembali satu halaman ke belakang dalam riwayat

Kalau mau lebih fleksibel, kamu juga bisa pakai history.go(n), di mana n bisa angka positif atau negatif:

history.go(2); // Maju dua halaman
history.go(-1); // Kembali satu halaman (sama kayak history.back())

Kapan Harus Menggunakan history.forward()?

✅ Kalau pengen bikin tombol "Maju" kayak di browser – Bisa dipakai buat navigasi antar halaman yang pernah dikunjungi tanpa harus klik tombol forward di browser. ✅ Kalau aplikasimu berbasis Multi Page Application (MPA) – Berguna banget buat navigasi antar halaman tanpa harus reload atau fetch ulang data. ✅ Kalau ingin memberikan pengalaman navigasi yang lebih lancar – Bisa jadi solusi kalau pengguna sering bolak-balik halaman dalam website atau aplikasi berbasis browser. ❌ Jangan gunakan kalau halaman berikutnya adalah halaman eksternal – history.forward() hanya bisa dipakai kalau ada halaman sebelumnya dalam riwayat browser pengguna.

Kesimpulan

  • history.forward() memungkinkan pengguna untuk maju ke halaman berikutnya dalam riwayat browser tanpa harus klik tombol browser.
  • Bisa digunakan dalam tombol atau script otomatis untuk memberikan navigasi yang lebih praktis.
  • history.go(1) punya fungsi yang sama, tapi lebih fleksibel kalau ingin lompat lebih dari satu halaman.
  • History API sangat berguna dalam pengelolaan navigasi dalam aplikasi web modern, termasuk Single Page Application (SPA) atau Multi Page Application (MPA).

Dengan memahami cara kerja history.forward(), kita bisa menciptakan pengalaman navigasi yang lebih nyaman, praktis, dan mudah digunakan bagi pengguna!

Read next