URLにGETパラメータを追加する

URLにGETパラメータを追加する

URLにGETパラメータを追加するときはURLSearchParamsオブジェクトのappendメソッドを使って追加することができます。

以下の例は、URLに新しいパラメータとして「mode=view」を追加します。

index.js

// URLを取得
var url = new URL(window.location.href);

if( !url.searchParams.get('mode') ) {

	url.searchParams.append('mode','view');
	location.href = url;

} else {
	console.log(url.searchParams.get('mode')); // view
}

if文の条件式ではすでにGETパラメータのmodeがあるかを確認します。
このパラメータを持っていない場合はappendメソッドを実行して追加した後に、新しいURLをlocation.hrefに入れてページをリダイレクト（再読込）します。

ページを再読込した後にもう1度if文でGETパラメータを確認し、パラメータがあることを確認できたらelse文へ移動してコンソールに値を出力します。

複数のGETパラメータを追加する

GETパラメータは必要に応じていくつでも追加することができます。
また、同じパラメータ名を持つGETパラメータも追加可能です。

以下の例は、URLがもともと持っている「mode=view」に加えて、3つのGETパラメータを追加します。

index.js

// URLを取得
var url = new URL(window.location.href);

url.searchParams.append('username','taro');
url.searchParams.append('mode','data1');
url.searchParams.append('mode','data2');

console.log(url.searchParams.get('username')); // taro
console.log(url.searchParams.getAll('mode')); // (3) ["view", "data1", "data2"]

appendメソッドを3回実行した後に、それぞれのパラメータ名の値をコンソールに出力します。
同じパラメータ名を持つものが複数ある場合は、getAllメソッドを使うと全てのデータを配列形式で取得することができます。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。