Add Parameter To Url Javascript Without Reload

MUAZHAN

4 min read

·

Jun 22, 2024

46

Share

Menambahkan Parameter ke URL JavaScript Tanpa Reload

Dalam pengembangan web, terkadang kita perlu menambahkan parameter ke URL tanpa melakukan reload halaman. Hal ini dapat dilakukan dengan JavaScript dan memanipulasi objek URLSearchParams. Artikel ini akan menjelaskan cara menambahkan parameter ke URL JavaScript tanpa reload halaman.

Memahami URLSearchParams

URLSearchParams adalah sebuah objek built-in dalam JavaScript yang memungkinkan kita untuk bekerja dengan parameter URL. Objek ini memberikan metode yang mudah untuk mendapatkan, mengatur, dan menghapus parameter URL.

Menambahkan Parameter

Berikut contoh kode untuk menambahkan parameter ke URL tanpa reload halaman:

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);

// Menambahkan parameter baru
params.append('newParameter', 'newValue');

// Mengatur URL baru dengan parameter yang diperbarui
url.search = params.toString();

// Memperbarui URL saat ini
window.history.replaceState(null, null, url.toString());

// Output URL yang diperbarui
console.log(url.toString());

Kode di atas melakukan hal berikut:

1. Membuat Objek URL: Kode tersebut mengambil URL saat ini menggunakan window.location.href dan membuat objek URL darinya.
2. Membuat Objek URLSearchParams: Kode tersebut membuat objek URLSearchParams dengan parameter yang ada di URL saat ini.
3. Menambahkan Parameter: Kode tersebut menambahkan parameter baru dengan nama newParameter dan nilai newValue ke objek URLSearchParams.
4. Mengatur URL Baru: Kode tersebut mengganti string pencarian (search) pada objek URL dengan string yang dihasilkan oleh params.toString().
5. Memperbarui Sejarah: Kode tersebut menggunakan window.history.replaceState() untuk memperbarui URL saat ini tanpa melakukan reload halaman.
6. Mencetak URL: Kode tersebut mencetak URL yang diperbarui ke konsol.

Contoh Penggunaan

Misalnya, kita ingin menambahkan parameter id ke URL saat ini dengan nilai 123. Kode di atas akan menjadi:

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
params.append('id', '123');
url.search = params.toString();
window.history.replaceState(null, null, url.toString());

Kode ini akan menambahkan parameter id=123 ke URL saat ini tanpa melakukan reload halaman.

Pertimbangan

• Pastikan parameter yang ditambahkan tidak memiliki nilai yang sama dengan parameter yang sudah ada. Jika ada nilai yang sama, nilai yang terakhir ditambahkan akan mengganti nilai yang lama.
• Objek URLSearchParams dapat digunakan untuk berbagai tujuan, seperti mendapatkan, mengatur, dan menghapus parameter URL.

Dengan menggunakan metode yang dijelaskan di atas, Anda dapat dengan mudah menambahkan parameter ke URL JavaScript tanpa melakukan reload halaman. Hal ini dapat membantu Anda untuk membuat aplikasi web yang lebih dinamis dan interaktif.