Sign in Subscribe
Javascript

Navigasi ke Halaman Sebelumnya dengan History Back di Browser

Navigasi ke Halaman Sebelumnya dengan History Back di Browser
Photo by Kelly Sikkema / Unsplash

Saat menjelajahi situs web, pengguna sering kali ingin kembali ke halaman sebelumnya tanpa harus mengklik tombol back di browser. JavaScript menyediakan cara sederhana untuk menangani ini menggunakan History API, khususnya metode history.back(). Dengan fitur ini, kita bisa memberikan pengalaman navigasi yang lebih mulus dan interaktif dalam aplikasi web.

Artikel ini akan membahas apa itu History API, bagaimana cara menggunakan history.back(), serta berbagai contoh implementasinya.

Apa Itu History API?

History API adalah bagian dari JavaScript yang memungkinkan kita untuk mengelola riwayat penelusuran halaman dalam sesi browser. Beberapa metode utama dalam History API adalah:

  • history.back() → Kembali ke halaman sebelumnya.
  • history.forward() → Maju ke halaman berikutnya.
  • history.go(n) → Bergerak 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.

Cara Menggunakan history.back()

Metode history.back() bekerja seperti tombol "Back" di browser. Ketika dipanggil, browser akan kembali ke halaman sebelumnya dalam riwayat navigasi.

1. Menggunakan history.back() dalam JavaScript

document.getElementById("backButton").addEventListener("click", function() {
    history.back();
});

Jika pengguna sebelumnya telah membuka halaman lain, metode ini akan mengarahkan mereka kembali.

2. Contoh Implementasi dalam HTML

<button id="backButton">Kembali</button>
<script>
    document.getElementById("backButton").addEventListener("click", function() {
        history.back();
    });
</script>

Ketika tombol diklik, browser akan kembali ke halaman sebelumnya tanpa perlu menekan tombol kembali di browser.

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

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

Kita juga bisa menggunakan history.go(n) dengan nilai positif atau negatif untuk melompat lebih dari satu halaman:

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

Kapan Harus Menggunakan history.back()?

✅ Jika ingin memberikan tombol kembali yang berfungsi seperti tombol browser.
✅ Jika ingin mengelola navigasi dalam aplikasi berbasis banyak halaman (MPA - Multi Page Application).
✅ Jika ingin meningkatkan pengalaman pengguna dengan navigasi yang lebih intuitif.
❌ Jangan gunakan jika halaman sebelumnya adalah halaman eksternal yang tidak bisa dikendalikan.

Kesimpulan

  • history.back() memungkinkan navigasi kembali ke halaman sebelumnya dengan mudah.
  • Bisa digunakan dalam tombol khusus untuk memberikan kontrol tambahan kepada pengguna.
  • history.go(-1) memiliki fungsi yang sama, tetapi memberikan fleksibilitas lebih jika ingin melompat beberapa halaman.
  • History API dapat digunakan untuk mengontrol navigasi dalam aplikasi web modern, termasuk Single Page Application (SPA) dengan framework seperti React atau Vue.

Dengan memahami cara kerja history.back(), kita bisa menciptakan navigasi yang lebih baik dan pengalaman pengguna yang lebih lancar dalam aplikasi web!

Read next