建站
咨詢
售后
建站咨詢
新聞中心
1. pushState使用pushStata方法可以向當(dāng)前瀏覽器歷史記錄棧中添加一條新紀(jì)錄。在點(diǎn)擊某個(gè)鏈接后想要?jiǎng)討B(tài)改變頁面URL地址，就能夠改變當(dāng)前頁面的URL地址了。
近年來，隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展和用戶需求的不斷提升，前端頁面跳轉(zhuǎn)已成為了每個(gè)網(wǎng)站必備的功能之一。而在這方面，HTML5 history新增加了兩個(gè)非常實(shí)用的API——pushState和replaceState。
那么這兩個(gè)API到底是什么呢？它們又有哪些優(yōu)點(diǎn)呢？下面就讓我們一起來探究一下吧！
首先，我們需要明確一個(gè)概念——瀏覽器歷史記錄。簡單來說，當(dāng)你在瀏覽器中打開一個(gè)網(wǎng)頁時(shí)，瀏覽器會(huì)將該網(wǎng)頁信息存儲(chǔ)在一個(gè)歷史記錄列表中，并且可以通過“后退”、“前進(jìn)”按鈕進(jìn)行導(dǎo)航操作。
而pushState和replaceState正是針對(duì)這樣的歷史記錄進(jìn)行操作的API。具體地說：
1. pushState
使用pushStata方法可以向當(dāng)前瀏覽器歷史記錄棧中添加一條新紀(jì)錄。其語法如下：
```javascript
window.history.pushState(stateObj, title, url);
```
其中stateObj表示要保存到history.state對(duì)象中的狀態(tài)數(shù)據(jù)；title表示標(biāo)題（目前大多數(shù)瀏覽器都無視此參數(shù)）；url表示URL地址。
例如，在點(diǎn)擊某個(gè)鏈接后想要?jiǎng)討B(tài)改變頁面URL地址，可以使用如下代碼：
window.history.pushState(null, null, '/new-url');
這樣，在不刷新頁面的情況下，就能夠改變當(dāng)前頁面的URL地址了。
2. replaceState
與pushState類似，replaceStata方法也可以向?yàn)g覽器歷史記錄棧中添加一條新紀(jì)錄。但是與pushState不同之處在于，replaceStata會(huì)將當(dāng)前瀏覽器歷史記錄棧頂?shù)臓顟B(tài)替換為新狀態(tài)。其語法如下：
window.history.replaceState(stateObj, title, url);
同樣地，stateObj表示要保存到history.state對(duì)象中的狀態(tài)數(shù)據(jù)；title表示標(biāo)題（目前大多數(shù)瀏覽器都無視此參數(shù)）；url表示URL地址。
例如，在某個(gè)操作后需要跳轉(zhuǎn)到一個(gè)新頁面，并且希望該新頁面沒有留下原來那個(gè)舊頁面的歷史記錄時(shí)，就可以使用replaceStata方法：
window.history.replaceState(null, null, '/new-page');
這樣，在跳轉(zhuǎn)后用戶點(diǎn)擊“后退”按鈕時(shí)就直接回到上一個(gè)非替換式導(dǎo)航頁而不是回到被替換掉的那個(gè)頁。
以上兩種API使得我們完全可以通過JavaScript動(dòng)態(tài)修改URL而無需進(jìn)行實(shí)際請(qǐng)求和響應(yīng)操作從而達(dá)到前端路由功能。同時(shí)它們還有以下優(yōu)點(diǎn)：
1. 使得我們能夠更好地控制網(wǎng)站或者應(yīng)用的狀態(tài)。
2. 在Ajax和HTML5歷史API技術(shù)結(jié)合下，可以實(shí)現(xiàn)更好的前端路由效果，從而提升用戶體驗(yàn)。
3. 可以避免頁面刷新或者跳轉(zhuǎn)操作帶來的不必要開銷。例如，在某些單頁應(yīng)用中，每次點(diǎn)擊鏈接都需要重新加載整個(gè)頁面顯然是不可取的。
總之，HTML5 history新增加的pushState和replaceState API為我們提供了更多控制瀏覽器歷史記錄棧、改變URL地址等方面功能。它們?cè)谇岸寺酚煞矫婢哂泻艽鬂摿?，并且能夠極大地提升網(wǎng)站或者應(yīng)用程序性能和用戶體驗(yàn)。因此，在今后開發(fā)過程中將會(huì)越來越廣泛使用這兩個(gè)API！
當(dāng)前文章：HTML5history新特性pushState、replaceState：開啟前端頁面跳轉(zhuǎn)新時(shí)代
分享鏈接：http://m.fisionsoft.com.cn/article/cdjosdd.html
