String kueri adalah data terstruktur, bukan teks yang akan diedit dengan penggabungan ad-hoc. URLSearchParams menangani pengkodean, kunci berulang, dan pemisah sehingga pembaruan filter tidak merusak alamat lainnya secara tidak sengaja.

const url = new URL(window.location.href);
url.searchParams.set("category", "css & layout");
url.searchParams.delete("page");
history.replaceState(null, "", url);

Ketahui kapan set dan penambahan berbeda

  • set menggantikan semua nilai untuk kunci dengan satu nilai.
  • append menambahkan nilai lain, yang berguna ketika suatu parameter dapat muncul lebih dari sekali.
  • getAll mengembalikan setiap nilai; dapatkan pengembalian hanya yang pertama.

Pertahankan bagian URL lainnya

Buat URL dari lokasi saat ini, perbarui hanya parameter yang dimiliki antarmuka Anda, dan pertahankan nama jalur dan hash tetap utuh. Hindari memasukkan informasi pribadi seperti kredensial ke dalam string kueri, yang dapat disalin ke dalam log dan perujuk.

Gunakan pushState ketika perubahan harus membuat langkah Tombol Kembali; gunakan replaceState ketika itu hanya memperbarui entri riwayat saat ini.