Cara Menambahkan Query String ke URL tanpa Reloading di JavaScript
Dalam pengembangan web, seringkali diperlukan untuk mengubah query string URL tanpa me-reload halaman. Ini memungkinkan aplikasi web untuk memperbarui konten tanpa harus meminta halaman baru dari server.
Berikut adalah beberapa metode umum untuk menambahkan query string ke URL tanpa melakukan reload halaman:
1. Menggunakan URLSearchParams
Metode ini adalah cara yang direkomendasikan untuk memanipulasi query string dalam JavaScript.
Berikut contohnya:
const urlParams = new URLSearchParams(window.location.search);
urlParams.append('param1', 'value1');
urlParams.append('param2', 'value2');
// Memperbarui URL tanpa reload
window.history.pushState({}, '', `${window.location.pathname}?${urlParams.toString()}`);
// Mendapatkan nilai parameter
console.log(urlParams.get('param1')); // Output: value1
Kode ini pertama-tama membuat objek URLSearchParams dari query string URL saat ini. Kemudian, dua parameter baru ditambahkan ke objek URLSearchParams. Akhirnya, window.history.pushState digunakan untuk mengubah URL tanpa melakukan reload.
2. Mengubah window.location.search Secara Langsung
Metode ini dapat digunakan untuk menambahkan parameter tunggal ke URL.
Berikut contohnya:
// Menambahkan parameter baru
let searchParams = window.location.search;
if (searchParams.length > 0) {
searchParams += '&';
}
searchParams += 'param1=value1';
// Memperbarui URL tanpa reload
window.history.pushState({}, '', `${window.location.pathname}?${searchParams}`);
// Mendapatkan nilai parameter
console.log(new URLSearchParams(window.location.search).get('param1')); // Output: value1
Kode ini mengambil query string saat ini, menambahkan parameter baru, dan kemudian memperbarui window.location.search tanpa me-reload halaman.
3. Menggunakan Library Javascript
Ada berbagai library JavaScript yang tersedia untuk memudahkan manipulasi URL, seperti qs dan query-string.
Berikut contoh menggunakan library qs:
// Install library menggunakan npm: npm install qs
import qs from 'qs';
// Mengubah query string
const newQueryString = qs.stringify({
param1: 'value1',
param2: 'value2'
});
// Memperbarui URL tanpa reload
window.history.pushState({}, '', `${window.location.pathname}?${newQueryString}`);
// Mendapatkan nilai parameter
const params = qs.parse(window.location.search);
console.log(params.param1); // Output: value1
Library seperti qs menyediakan fungsionalitas yang lebih maju untuk memanipulasi query string, seperti penggabungan dan penghapusan parameter.
Kesimpulan
Mampu menambahkan query string ke URL tanpa me-reload halaman sangat bermanfaat untuk menciptakan pengalaman pengguna yang lebih baik. Metode yang dijelaskan di atas memberikan fleksibilitas untuk memanipulasi URL dengan cara yang dinamis. Pastikan untuk memilih metode yang paling cocok dengan kebutuhan Anda dan gunakan library jika diperlukan.