0Pricing
HTML Academy · Pelajaran

pushState dan replaceState

Perbarui URL peramban tanpa memuat ulang seluruh halaman.

pushState dan replaceState adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

API Riwayat

API Riwayat memungkinkan halaman mengubah URL yang ditampilkan di bilah alamat tanpa memicu navigasi penuh. Jika dipadukan dengan perenderan sisi klien, API ini mendukung aplikasi satu halaman yang terasa seperti aplikasi bawaan tanpa mengorbankan URL yang dapat disimpan sebagai markah.

pushState

history.pushState(state, "", url) menambahkan entri baru ke riwayat peramban. URL di bilah alamat segera diperbarui; tidak ada permintaan jaringan yang dibuat. Pengguna dapat kembali ke entri sebelumnya menggunakan tombol kembali peramban.

history.pushState({ view: "settings" }, "", "/settings");

Argumen state

Argumen pertama adalah data arbitrer yang dapat diserialisasi dan dilampirkan ke entri tersebut. Baca kembali data itu melalui history.state atau dalam peristiwa popstate. Gunakan data ini untuk meneruskan status antarmuka (tab yang terbuka dan posisi gulir), sehingga navigasi kembali dapat memulihkan tampilan secara persis.

Argumen judul

Argumen kedua adalah judul entri. Dalam praktiknya, semua peramban modern mengabaikannya—tetapkan document.title = "..." secara langsung untuk mengubah judul. Sebagai konvensi, berikan string kosong; ini tidak berpengaruh.

Argumen url

Argumen ketiga adalah URL baru. URL relatif diuraikan berdasarkan halaman saat ini; URL baru harus memiliki asal yang sama (lintas asal akan memicu SecurityError). Peramban tidak mengambil URL tersebut—pushState hanya memperbarui bilah alamat dan riwayat.

replaceState

history.replaceState(state, "", url) menggantikan entri riwayat saat ini, bukan menambahkan entri baru. Gunakan saat Anda ingin memperbarui URL tanpa membuat langkah baru untuk navigasi kembali (misalnya, saat memperbarui string kueri filter).

// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);

Kasus Penggunaan pushState

Perubahan route SPA (mengklik tautan navigasi tanpa pemuatan ulang penuh), membuka jendela modal (agar tombol kembali menutupnya), serta perpindahan langkah dalam panduan. Setiap status yang bermakna harus menjadi entri riwayat baru, sehingga tombol kembali bekerja sesuai harapan pengguna.

Kasus Penggunaan replaceState

Pembaruan filter/pengurutan/paginasi yang tidak seharusnya memenuhi riwayat, pengalihan setelah sebagian formulir selesai, serta pembaruan parameter pelacakan tanpa membuat entri yang dapat dinavigasi. Saat pengguna menekan tombol kembali, status "perantara" ini dilewati.

Perbarui Tampilan Setelah pushState

pushState hanya mengubah URL—kode Anda harus memperbarui DOM secara terpisah. Polanya adalah: tampilkan konten baru, lalu panggil pushState. Keduanya bersama-sama menghasilkan pengalaman SPA.

function navigate(path) {
  renderPage(path);
  history.pushState(null, "", path);
  window.scrollTo(0, 0);
}

Pembaruan Judul dan Meta

Perbarui document.title dan tag meta og:title setelah navigasi agar berbagi di media sosial dan judul tab peramban mencerminkan tampilan saat ini. Jika hal ini dilupakan, judul asli tetap digunakan pada pembagian berikutnya—kesalahan SPA yang samar tetapi umum.

pushState Awal Saat Halaman Dimuat

Memanggil pushState sebelum pengguna melakukan navigasi akan menimpa entri awal. Untuk menyertakan status pada entri pertama halaman, gunakan replaceState—cara ini menyertakan status tanpa mengubah kedalaman riwayat.

Batasan Keamanan

URL pushState harus memiliki asal yang sama. Mencoba melakukan pushState ke https://evil.com akan memicu SecurityError. Hal ini mencegah halaman memalsukan bilah alamat sehingga pengguna mengira mereka berada di situs lain.

Pemeriksaan Pengetahuan

Apa yang dilakukan history.replaceState yang tidak dilakukan history.pushState?

Ringkasan

pushState menambahkan entri riwayat baru tanpa memuat ulang halaman—dasar perutean SPA. replaceState memperbarui entri saat ini secara langsung untuk perubahan URL kosmetik. Keduanya memerlukan URL dengan asal yang sama dan mengabaikan argumen judul. Selalu perbarui DOM secara terpisah, dan ingat untuk memperbarui document.title serta tag meta setelah navigasi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “pushState dan replaceState” gratis?

Ya — teks lengkap “pushState dan replaceState” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “pushState dan replaceState”?

Perbarui URL peramban tanpa memuat ulang seluruh halaman. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “pushState dan replaceState” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. pushState dan replaceState
  2. Peristiwa popstate
  3. Perutean Berbasis Hash vs Berbasis Jalur
  4. Navigation API peramban modern
← Kembali ke HTML Academy