Mengakses dan Mengubah URL Setelah Tanda Pagar dengan Hash Location

Saat bekerja dengan JavaScript, ada kalanya kita perlu mengakses atau mengubah URL setelah tanda pagar (#). Ini biasanya digunakan dalam navigasi halaman tanpa reload, seperti dalam Single Page Application (SPA) atau untuk menyimpan status dalam URL.

JavaScript menyediakan location.hash untuk mengelola bagian hash dalam URL. Dengan fitur ini, kita bisa membaca, mengubah, atau merespons perubahan hash untuk menciptakan pengalaman navigasi yang lebih interaktif.

Di artikel ini, kita akan membahas cara mengakses dan mengubah hash location serta bagaimana menggunakannya dalam pengembangan web.

Apa Itu Hash Location?

Hash location adalah bagian dari URL yang dimulai setelah tanda # (hash). Hash ini tidak dikirim ke server dan hanya digunakan di sisi browser.

Contoh URL dengan hash:

https://example.com/#dashboard

Di sini, bagian #dashboard disebut hash location.

Kenapa Hash Location Penting?

✅ Navigasi tanpa reload – Berguna untuk Single Page Application (SPA).
✅ Menandai status halaman – Bisa digunakan untuk menyimpan state tertentu, seperti tab aktif atau filter pencarian.
✅ Tidak memicu request ke server – Hash hanya bekerja di sisi frontend, tidak mengubah halaman sebenarnya.

Cara Mengakses Hash Location

Kita bisa mengakses hash menggunakan location.hash.

console.log(location.hash);

Jika URL saat ini adalah:

https://example.com/#profile

Maka output yang dihasilkan:

#profile

Untuk menghapus tanda pagar, kita bisa gunakan .substring(1):

console.log(location.hash.substring(1));
// Output: profile

Cara Mengubah Hash Location

Kita bisa mengubah hash dengan langsung menetapkan nilai baru ke location.hash:

location.hash = "settings";

Jika kode di atas dieksekusi, URL akan berubah menjadi:

https://example.com/#settings

Menangani Perubahan Hash dengan Event Listener

Jika kita ingin menjalankan kode setiap kali hash berubah, kita bisa menggunakan event hashchange:

window.addEventListener("hashchange", function() {
    console.log("Hash berubah menjadi:", location.hash.substring(1));
});

Contohnya, jika kita mengubah hash dari #home ke #about, event listener akan mendeteksi perubahan ini dan menjalankan kode.

Contoh Implementasi: Navigasi Sederhana dengan Hash

Mari kita buat sistem navigasi sederhana menggunakan hash location:

<button onclick="ubahHalaman('home')">Home</button>
<button onclick="ubahHalaman('about')">About</button>
<button onclick="ubahHalaman('contact')">Contact</button>
<div id="content">Pilih halaman</div>

<script>
    function ubahHalaman(halaman) {
        location.hash = halaman;
    }

    function muatHalaman() {
        let halaman = location.hash.substring(1);
        let content = document.getElementById("content");
        if (halaman === "home") {
            content.textContent = "Ini adalah halaman Home";
        } else if (halaman === "about") {
            content.textContent = "Ini adalah halaman About";
        } else if (halaman === "contact") {
            content.textContent = "Ini adalah halaman Contact";
        } else {
            content.textContent = "Pilih halaman";
        }
    }

    window.addEventListener("hashchange", muatHalaman);
    muatHalaman();
</script>

Setiap kali tombol diklik, hash akan berubah, dan konten akan diperbarui sesuai hash tanpa reload.

Perbedaan Hash Location vs Query String

Banyak yang bingung antara hash location dan query string (?) dalam URL. Berikut perbedaannya:

Kapan Menggunakan Hash Location?

• Saat membuat navigasi tanpa reload.
• Saat ingin menyimpan status halaman tanpa mempengaruhi request server.
• Saat mengelola halaman dinamis dalam Single Page Application (SPA).

Kapan Menggunakan Query String?

• Saat membutuhkan data dikirim ke server.
• Saat ingin menyimpan filter pencarian atau parameter API.
• Saat menggunakan caching dan indexing oleh mesin pencari.

Kesimpulan

• Hash location (location.hash) memungkinkan kita mengakses dan mengubah URL setelah tanda #.
• Tidak memuat ulang halaman dan hanya bekerja di sisi frontend.
• Cocok untuk navigasi dinamis dalam Single Page Application (SPA).
• Event hashchange memungkinkan kita menangkap perubahan hash dan meresponsnya secara real-time.
• Berbeda dengan query string (?), hash location tidak dikirim ke server dan hanya digunakan untuk pengelolaan state di frontend.

Dengan memahami cara kerja hash location, kita bisa menciptakan navigasi web yang lebih interaktif dan responsif tanpa perlu reload halaman!