使用此方法瀏覽器前進(jìn)后退仍然可查看對(duì)應(yīng)內(nèi)容

兩個(gè)方法的主要區(qū)別就是：pushState()是在history棧中添加一個(gè)新的條目，replaceState()是替換當(dāng)前的記錄值。用pushState的時(shí)候會(huì)產(chǎn)生一條新的history，replaceState則不會(huì)產(chǎn)生。

設(shè)置值

history.pushState({}, "頁(yè)面標(biāo)題", "xxx.html"); history.replaceState(null, "頁(yè)面標(biāo)題", "xxx.html");

比如設(shè)置?history.pushState({},"","#2"); 獲取location.hash == “2”

某種意義上，調(diào)用pushState()有點(diǎn)類似于設(shè)置window.location='#foo'，它們都會(huì)在當(dāng)前文檔內(nèi)創(chuàng)建和激活新的歷史記錄條目。但pushState()有自己的優(yōu)勢(shì)：

• 新的URL可以是任意的同源URL，與此相反，使用window.location方法時(shí)，只有僅修改 hash 才能保證停留在相同的document中。
• 根據(jù)個(gè)人需要來決定是否修改URL。相反，設(shè)置window.location='#foo'，只有在當(dāng)前hash值不是foo時(shí)才創(chuàng)建一條新歷史記錄。
• 你可以在新的歷史記錄條目中添加抽象數(shù)據(jù)。如果使用基于hash的方法，你只能把相關(guān)數(shù)據(jù)轉(zhuǎn)碼成一個(gè)很短的字符串。

注意pushState()方法永遠(yuǎn)不會(huì)觸發(fā)hashchange事件，即便新的地址只變更了hash。

?

參考地址https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

張?chǎng)涡?http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

轉(zhuǎn)載于:https://www.cnblogs.com/huangxiaowen/p/6225918.html

總結(jié)

以上是生活随笔為你收集整理的pushState 和 replaceState的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。