URLSearchParamsの基本：getパラメータを管理する【JavaScript】

JavaScript

2023.12.17

概要
使い方
参考

概要

これまではURLのパラメータを管理するときに、文字列としてパラメータの追加・削除等を行なっていました。

しかし、URLSearchParamsを使ったところ、制御がより容易になったで、メモとして残します。

使い方

前提

以下のURLでサイトを表示しているとします。
https://sample.com/path?palam1=hoge&palam2=piyo

パラメータの削除

パラメータの取得

const searchParams = new URLSearchParams(window.location.search);

let palam1 = searchParams.get("palam1");
let palam2 = searchParams.get("palam2");

console.log(palam1);
//hoge
comsole.log(palam2);
//piyo

パラメータの追加・削除

const searchParams = new URLSearchParams(window.location.search);

//パラメータ削除
searchParams.delete("palam1");
//既存パラメータの更新
searchParams.set('palam2', 'piyopiyo');
//新規パラメータ追加
searchParams.append('palam3', 'fuga');

console.log(palam1);
//null
console.log(palam2)
//piyopiyo
console.log(palam3)
//fuga

パラメータ更新後のURLにリダイレクト

const searchParams = new URLSearchParams(window.location.search);

//先述の処理を行う
searchParams.delete("palam1");
searchParams.set('palam2', 'piyopiyo');
searchParams.append('palam3', 'fuga');

//新規URLを生成
let newUrl = `${window.location.origin}${window.location.pathname}?${searchParams.toString()}`;

//更新後のURLにリダイレクト
window.location.href = newUrl;

//↑は下記のURLにリダイレクトされる
//https://sample.com/path?palam2=piyopiyo&palam3=huga