JavaScript - History API

Hello, pengguna baru! Hari ini, kita akan mengembara melalui waktu... well, waktu browser, itu saja! Kita masuk ke dunia yang menarik API History JavaScript. Jangan khawatir jika Anda baru belajar programming; saya akan menjadi panduan ramah Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, pasang sabuk pengaman Anda, dan mari kita mulai!

Web History API

Imaginasi Anda sedang berkeliling dalam album foto perjalanan Anda yang baru. Anda bisa kembali ke halaman sebelumnya atau melompat ke halaman berikutnya. Web History API bekerja sama seperti itu tapi untuk pengalaman browsing Anda. Itu memungkinkan JavaScript untuk berinteraksi dengan riwayat browser, memberikan Anda kontrol atas navigasi back dan forward.

Pikirkan itu sebagai mesin waktu untuk halaman web Anda. Keren, kan?

Cara Menggunakan JavaScript History API?

Menggunakan API History seperti memiliki remote control untuk riwayat browser Anda. mari kita pecahnya menjadi langkah-langkah sederhana:

1. Mengakses API
2. Menavigasi melalui riwayat
3. Menambah entri baru ke riwayat

Sebelum kita masuk ke kode, mari saya share cerita pendek. Ketika saya pertama kali mengajarkan ini kepada murid-muridku, saya menggunakan analogi buku dengan bookmark. API History memungkinkan Anda membalik halaman (navigasi), menambah bookmark (mempush state baru), dan bahkan mengubah halaman (mengganti state). Hal ini membantu mereka memahami konsep secara cepat, dan saya harap itu juga membantu Anda!

Sintaks

Sekarang, mari kita lihat sintaks dasar API History. Jangan khawatir; kita akan menjelaskan setiap bagian secara detil.

// Mengakses objek History
window.history

// Metode yang bisa kita gunakan
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

Mari kita pecahkan ini satu per satu:

Tabel Metode

Metode	Deskripsi
back()	Memuat halaman sebelumnya dalam riwayat
forward()	Memuat halaman berikutnya dalam riwayat
go()	Memuat halaman spesifik dari riwayat
pushState()	Menambah state baru ke riwayat
replaceState()	Mengubah entri riwayat saat ini

Memuat Halaman Sebelumnya dalam Daftar Riwayat

Ingat saat saya membahas membalik halaman dalam album foto? Itu persis apa yang history.back() lakukan untuk halaman web Anda. Berikut cara Anda menggunakannya:

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

Misalnya Anda memiliki tombol "Back" di halaman Anda. Anda bisa menggunakan fungsi ini seperti ini:

<button onclick="goBack()">Go Back</button>

Ketika pengguna mengklik tombol ini, itu seperti mereka mengklik tombol back browser. Magic, kan?

Memuat Halaman Berikutnya dalam Daftar Riwayat

Sekarang, apa bila Anda ingin maju? Itu tempat history.forward() berguna:

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

Anda bisa menggunakannya dengan tombol "Forward":

<button onclick="goForward()">Go Forward</button>

Mengklik tombol ini setara dengan menekan tombol forward browser. Itu seperti melompat ke depan dalam album foto khayal kita.

Mendapatkan Panjang Daftar Riwayat

Curiga tentang berapa banyak halaman di riwayat browser Anda? Properti history.length menangani Anda:

console.log(history.length);

Ini akan mengoutputkan jumlah halaman dalam riwayat sesi saat ini. Itu seperti menghitung berapa banyak foto Anda dalam album.

Berikut adalah cara menampilkan ini di halaman Anda:

function showHistoryLength() {
document.getElementById('historyLength').innerHTML = 'You have ' + history.length + ' pages in your history.';
}

<button onclick="showHistoryLength()">Check History Length</button>
<p id="historyLength"></p>

Sekarang, mari kita masuk ke fitur lebih lanjut dari API History.

Menambah Entri Baru ke Riwayat

kadang-kadang, Anda mungkin ingin menambah "halaman" baru ke riwayat tanpa benar-benar memuat halaman baru. Itu tempat pushState() berguna:

function addToHistory(state, title, url) {
history.pushState(state, title, url);
}

// Penggunaan
addToHistory({ page: 'home' }, 'Home Page', '/home');

Ini menambah entri baru ke riwayat. Itu seperti menambah foto baru ke album Anda tanpa benar-benar mengambil foto baru!

Mengubah Entri Riwayat Saat Ini

Apa bila Anda ingin mengubah entri saat ini dalam riwayat? Itu tempat replaceState() bermain peran:

function updateCurrentState(state, title, url) {
history.replaceState(state, title, url);
}

// Penggunaan
updateCurrentState({ page: 'updated home' }, 'Updated Home Page', '/updated-home');

Ini seperti mengedit keterangan foto saat ini dalam album Anda.

Mendengarkan Perubahan Riwayat

Trik terakhir: Anda bisa mendengarkan perubahan riwayat menggunakan event popstate:

window.addEventListener('popstate', function(event) {
console.log('Navigation occurred');
console.log(event.state);
});

Ini seperti memiliki teman yang memberitahu Anda saat orang lain membalik halaman dalam album foto.

Dan itu adalah! Kita telah mengembara melalui API History JavaScript, dari navigasi dasar hingga menambah dan mengubah entri riwayat. Ingat, latihan membuat sempurna. Cobalah untuk menggabungkan metode ini ke proyek web Anda, dan segera Anda akan menjadi ahli dalam mengnavigasi riwayat browser seperti seorang pro!

Saya harap tutorial ini membantu dan mungkin sedikit menyenangkan. Terus coding, terus belajar, dan jangan lupa untuk menikmati perjalanan. Setelah semuanya, dalam pengembangan web, kita semua adalah pengembara waktu dalam cara kita sendiri!

Credits: Image by storyset