使用純JS(vanilla JS)設定、清除網址裡的參數(url param)

前言

使用前端框架開發的 SPA 網頁，都是單一頁面
很容易忽略掉早期網站很常會在網址帶參數，達到一些自動填寫的效果
比如一多條件的搜尋頁面，若不透過網址自動填入搜尋結果的話
user 在分享頁面時，就無法很方便的直接將目前結果貼給他人觀看

使用感受如591實價登錄
當每設定一個條件時，可以注意到網址裡的參數會同步更新
於是在分享頁面就會非常方便！

前端框架有些有在抽象一層
如 vue-router、Angular 等都有針對網址參數有自己的封裝

但其實最終都是呼叫到 browser API
若僅是為了特定查詢頁面，不想在花心力去研究框架的使用方式的話
可直接使用 vanilla JS 增加此功能！

取得網址參數

以參數?name=andy為例

const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('name')); // true
console.log(urlParams.get('name')); // "andy"

設定網址參數

觸發下列程式碼後，會看到網址列現有的參數繼續增加
如?name=andy&age=18

const url = new URL(location.href);
url.searchParams.set('age', 18);
history.pushState(null, '', url);

若不希望一直疊加參數的話，則在設定前，先將參數清空後再增加
寫法如下

清空網址參數

if (location.href.includes('?')) {
    history.pushState({}, null, location.href.split('?')[0]);
}

結合設定、清空的泛用寫法

由於查詢條件可能會因需求而增加欄位
若是寫死欄位，對於長期維護相當不方便
可以寫成直接傳入object，達到萬用更新參數！

/**
 * 將參數設定指網址
 * @param 傳入參數物件，如{name: 'andy', age: 18}
 **/
setUrlParams(params) {
  clearUrlParams();

  const url = new URL(location.href);
  for (const [key, value] of Object.entries(params)) {
    url.searchParams.set(key, value);
  }

  history.pushState(null, '', url);
},

/**
 * 清除網址參數
 **/
clearUrlParams() {
  if (location.href.includes('?')) {
    history.pushState({}, null, location.href.split('?')[0]);
  }
},

參考資料

stack overflow / How can I get query parameters from a URL in Vue.js?
stack overflow / How can I add or update a query string parameter?