BAGAIMANA CARA MENGGUNAKAN WINDOW.HISTORY

Kamu tahu tidak, kalau Javascript punya fitur untuk mengatur dan menavigasi halaman lewat kode, namanya window.history.

Apa itu window.history?

Oke, coba kamu bayangkan seperti bermain game, terus kamu pengen balik ke level sebelumnya atau pengen maju ke level atas. Nah! cara kerjanya window.history mirip banget sama hal kaya gitu! Gampangnya, objek ini membantu kamu buat mengelola riwayat halaman yang sudah dikunjungi oleh user di browser.

Fitur Utama pada window.history

1. Mau tau berapa halaman yang sudah dikunjungi? Gunakan window.history.length untuk menampilkan total entri riwayat halaman yang dikunjungi di sesi ini.

2. Navigasi kembali Kamu bisa gunakan history.back()` untuk mengembalikan user ke halaman sebelumnya di riwayat browser

3. Navigasi Maju Gunakan history.forward() untuk mengarahkan user ke halaman berikutnya dalam riwayat yang telah dikunjungi.

4. Mau pindah ke halaman tertentu? Gunakan history.go(n) yang memungkinkan kamu atau user berpindah ke halaman tertentu dalam riwayat, di mana n adalah jumlah langkah (positif untuk maju dan negatif untuk mundur).

Contoh simpel!

Bingung? Mari kita cek beberapa contoh agar makin jelas!

1. Cek Jumlah Entri Untuk mengetahui berapa banyak entri yang ada di riwayat, gunakan history.length!

console.log(history.length); // ini akan nunjukin jumlah entri dalam riwayat halaman yang kamu kunjungi

Contoh penggunaan dalam aplikasinya,

<p>Jumlah halaman dalam riwayat sesi: <span id="historyLength"></span></p>

<script>
    document.getElementById("historyLength").textContent = window.history.length;
</script>

2. Untuk mengambil pengguna ke halaman sebelumnya, bisa menggunakan navigasi dengan history.back()

function goBack() {
    window.history.back();
}

Contoh penggunaan dalam aplikasinya,

<button onclick="goBack()">Kembali ke home</button>

<script>
function goBack() {
    window.history.back();
}
</script>

3. Navigasi dengan history.forward() Mengambil pengguna ke halaman selanjutnya.

function goForward() {
    window.history.forward();
}

Contoh penggunaan dalam aplikasinya,

<button onclick="goForward()">Halaman selanjutnya</button>

<script>
function goForward() {
    window.history.forward();
}
</script>

4. Menggunakan history.go() Memindahkan pengguna ke entri tertentu dalam riwayat.

function goToPreviousPage() {
    window.history.go(-1); // Kembali satu halaman
}
function goToNextPage() {
    window.history.go(1); // Maju satu halaman
}

Contoh penggunaan dalam aplikasinya,

<button onclick="goToPage(-2)">Mundur 2 Halaman</button>
<button onclick="goToPage(1)">Maju 1 Halaman</button>

<script>
    function goToPage(steps) {
        window.history.go(steps);
    }
</script>

Ingat, saat kamu menggunakan history.go(n), kamu bisa berpindah ke halaman tertentu, meskipun kamu nggak nambahin atau punya URL-nya. Oh iya, Browser umumnya juga membatasi akses ke window.history, gunanya untuk mencegah skrip jahat yang bisa ganggu navigasi tanpa sepengetahuan user atau kamu.

Jadi, window.historyadalah alat yang super berguna buat mengelola atau ngatur riwayat sesi user di aplikasi web. Dengan ini kamu dapat dengan mudah membuat navigasi yang responsif dan lebih menyenangkan. Selamat mencoba!