還在學習中，記錄一下在工作上遇到的問題
若有錯誤的地方歡迎指教，十分感謝

需求

• 在頁面中實踐 SPA
• 新增自訂義 query string，放到為 URL 中
• 頁面可以依據 query string 的內容去發 API

實作步驟：

瀏覽本身提供了 URL、URLSearchParams 的 WebAPIs 可以使用
參考：URL、URLSearchParams

1. 拿取當前頁面的 URL，加入 query string

const currentUrl = new URL(window.location.href);
const searchParams = new URLSearchParams();
searchParams.append('item', 100);
currentUrl.search = searchParams;
const address = `http://www.test.com/page${currentUrl.search}`;

console.log(address);  
// http://www.test.com/page?item=100

URLSearchParams 還有提供很多方法可以對參數/值做事：

URLSearchParams.append()  // 插入一個自定義的參數與值
URLSearchParams.delete()  // 刪除指定參數及值
URLSearchParams.get()  // 取得指定查詢的參數(第一個值)
URLSearchParams.has()  // 判斷參數是否存在

2. 將自定義的 URL 加入到瀏覽器的歷史紀錄堆疊（history stack）

HTML5 提供了可以儲存網頁歷史紀錄的方法：
history.pushState() 和 history.replaceState() 方法
兩者差別在紀錄堆疊的方式不同，細節可參考：History API

state：可儲存一個 state 物件，並能在 onpopstate 事件中拿到該值
title：更新後頁面的標題，目前瀏覽器會忽略，文件中建議給空字串
url：設定要更新歷史紀錄的 URL

// history.pushState(state, title, url);
history.pushState(null, null, address);

遇到問題

被更換過的 URL 頁面，若點擊瀏覽器的上一頁按鈕卻沒有反應，但 URL 確實有被置換
查詢文件後發現，瀏覽器對於新的URL並不會重新加載、檢查存在與否

解決方式

使用瀏覽器提供的方法 window.onpopstate Window.onpopstate
該方法會在會在歷史紀錄有發生變動時被觸發(例如點擊瀏覽器的上下一頁按鈕)一個 popstate event

我們就可以在事件中，加入自定義的內容，去判斷當前狀態是否需要進行頁面重載

window.onpopstate = function(event) {
    if (event.state) return
    location.reload();
}

參考相關資料

• 操控瀏覽器歷史紀錄
• 瀏覽器的時光機—歷史堆疊、 pushState 與 replaceState API
• history.pushState - not working?