JavaScript - History API

Halo, para pemrogram yang sedang berkembang! Hari ini, kita akan melakukan perjalanan menarik melalui waktu... ya, waktu browser, itu! Kita akan mendalami dunia yang menarik dari JavaScript History API. Jangan khawatir jika Anda baru dalam pemrograman; 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

Bayangkan Anda berflipping melalui album foto perjalanannya. Anda dapat 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 mundur dan maju.

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

Cara Menggunakan JavaScript History API?

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

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

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

Sintaks

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

// Mengakses objek History
window.history

// Metode yang dapat digunakan
history.back()
history.forward()
history.go()
history.pushState()
history.replaceState()

Mari kita pecah ini satu per satu:

Tabel Metode

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

Memuat Halaman Sebelumnya dalam Daftar Riwayat

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

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

katakanlah Anda memiliki tombol "Back" di halaman Anda. Anda dapat menggunakan fungsi ini seperti ini:

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

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

Memuat Halaman Berikutnya dalam Daftar Riwayat

Sekarang, apa jika Anda ingin maju? Itu di mana history.forward() berguna:

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

Anda dapat menggunakannya dengan tombol "Forward":

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

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

Mendapatkan Panjang Daftar Riwayat

Curious about how many pages are in your browser's history? The history.length property has got you covered:

console.log(history.length);

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

Ini adalah cara menyajikannya secara menarik 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 beberapa fitur yang lebih lanjut dari History API.

Menambahkan Entri Baru ke Riwayat

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

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

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

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

Mengubah Entri Riwayat Saat Ini

Apa jika Anda ingin mengubah entri saat ini dalam riwayat? Itu di mana replaceState() masuk ke dalam gambar:

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

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

Ini seperti mengedit judul foto saat ini di album Anda.

Mendengarkan Perubahan Riwayat

Trik terakhir yang menarik: Anda dapat mendengarkan perubahan dalam 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 di album foto.

Dan begitu saja! Kita telah melakukan perjalanan melalui JavaScript History API, dari navigasi dasar hingga menambahkan dan mengubah entri riwayat. Ingat, latihan membuat sempurna. Cobalah untuk menggabungkan metode ini ke dalam proyek web Anda, dan segera Anda akan menjadi ahli dalam menavigasi riwayat browser!

Saya harap tutorial ini telah 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