pushstate用于添加新歷史記錄，語法為window.history.pushstate(state, title, url)，其中state存儲頁面狀態，url修改地址欄url；replacestate則用于替換當前歷史記錄條目，語法相同但不會新增記錄。監聽頁面變化需監聽popstate事件，其回調函數可通過Event.state獲取狀態并更新內容。跨域時history api受限，不可設置不同域的url。單頁應用利用history api實現無刷新導航，兼容舊瀏覽器可使用polyfill或hash-based路由方案。
dom操作歷史記錄，其實就是在瀏覽器歷史記錄中穿梭或者修改，讓用戶在不離開當前頁面的前提下，模擬前進后退，或者改變URL而不刷新頁面。
History API提供了pushState和replaceState方法，可以修改瀏覽器的歷史記錄棧，而window.onpopstate事件則可以監聽歷史記錄的變化。
如何使用pushState添加新的歷史記錄？
pushState方法允許你向瀏覽器的歷史記錄棧中添加一個新的狀態。它的語法是：window.history.pushState(state, title, url)。
- state：一個與新歷史記錄條目相關聯的JavaScript對象。當用戶導航到新的狀態時，會觸發popstate事件，并且該對象會作為事件的state屬性提供。可以用來存儲一些數據，比如當前頁面的狀態信息。
- title：大多數瀏覽器會忽略此參數，所以可以傳入空字符串。
- url：新的歷史記錄條目的URL。這個URL不會導致頁面刷新，但會出現在瀏覽器的地址欄中。可以設置為相對URL或絕對URL。如果設置為相對URL，它會相對于當前URL。
例如：
window.history.pushState({page: 1}, '', '/page1');
這會在歷史記錄中添加一個新的條目，URL變為/page1，并且state對象包含{page: 1}。
replaceState與pushState的區別是什么？
replaceState方法與pushState類似，但是它不是添加一個新的歷史記錄條目，而是替換當前的條目。它的語法與pushState相同：window.history.replaceState(state, title, url)。
使用場景：比如用戶在某個頁面進行了某些操作，你想更新URL來反映這些操作，但又不想在歷史記錄中添加一個新的條目，就可以使用replaceState。
例如：
window.history.replaceState({page: 2}, '', '/page2');
這會將當前的歷史記錄條目替換為URL為/page2，state對象包含{page: 2}。
如何監聽歷史記錄的變化？
當用戶點擊瀏覽器的前進或后退按鈕時，會觸發popstate事件。你可以通過監聽這個事件來響應歷史記錄的變化。
window.addEventListener('popstate', function(event) { if (event.state) { // event.state包含pushState或replaceState方法傳遞的state對象 console.log('當前頁面狀態：', event.state); // 根據狀態更新頁面內容 updatePageContent(event.state); } else { // 初始頁面加載時，state對象為null console.log('初始頁面加載'); } }); function updatePageContent(state) { // 根據state對象中的數據更新頁面內容 // 例如，可以根據state.page的值加載不同的內容 console.log('更新頁面內容，當前頁碼：', state.page); }
需要注意的是，popstate事件只會在用戶通過瀏覽器的前進或后退按鈕導航時觸發。使用pushState或replaceState方法修改歷史記錄不會觸發popstate事件。
跨域情況下 History API 的限制
History API 在跨域情況下會受到限制。具體來說，如果你嘗試使用pushState或replaceState方法設置一個與當前頁面不同域的URL，瀏覽器會拋出一個安全錯誤。這是為了防止惡意網站通過修改歷史記錄來欺騙用戶。
例如，如果你的頁面位于http://example.com，你不能使用pushState將URL設置為http://evil.com。瀏覽器會阻止這種操作。
不過，你可以使用postMessage方法在不同的域之間進行通信，并在目標域中調用History API。但這需要你在兩個域中都編寫相應的代碼。
History API 與單頁應用（SPA）
History API 是構建單頁應用（SPA）的關鍵技術之一。在SPA中，用戶在不同的“頁面”之間導航時，實際上并沒有發生真正的頁面刷新。相反，SPA會使用JavaScript動態地更新頁面的內容。
History API 允許SPA更新瀏覽器的URL，而不會導致頁面刷新。這使得用戶可以像瀏覽傳統的多頁應用一樣使用瀏覽器的前進和后退按鈕。同時，SPA還可以使用URL中的hash（#）來表示不同的頁面狀態。
例如，一個SPA可以使用/表示首頁，/products表示產品列表頁，/products/123表示ID為123的產品詳情頁。當用戶點擊一個產品時，SPA會使用pushState方法將URL更新為/products/123，然后動態地加載產品詳情內容。
如何處理不支持 History API 的舊瀏覽器？
雖然現代瀏覽器都支持 History API，但仍然有一些舊瀏覽器不支持。為了兼容這些瀏覽器，你可以使用一些polyfill庫，例如history.JS。這些庫會模擬 History API 的功能，使得你的代碼可以在舊瀏覽器中正常運行。
另一種方法是使用hash-based routing。在不支持 History API 的瀏覽器中，你可以使用URL中的hash來表示不同的頁面狀態。當hash發生變化時，你可以監聽hashchange事件，并根據新的hash值更新頁面內容。
例如，你可以使用#/products表示產品列表頁，#/products/123表示ID為123的產品詳情頁。當用戶點擊一個產品時，你可以將URL更新為#/products/123，然后監聽hashchange事件并加載產品詳情內容。
需要注意的是，hash-based routing有一些缺點。例如，URL中會包含#符號，這可能會影響美觀。另外，hash-based routing不利于SEO，因為搜索引擎通常會忽略URL中的hash。
