當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript历史状态管理
生活随笔
收集整理的這篇文章主要介紹了
JavaScript历史状态管理
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、API
（1）history.pushState：能夠在不加載新頁面的情況下改變?yōu)g覽器的 URL
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");執(zhí)行 pushState() 方法后，新的狀態(tài)信息就會被加入歷史狀態(tài)棧，而瀏覽器地址欄也會變成新的相對 URL。
但是，瀏覽器并不會真的向服務器發(fā)送請求，即使狀態(tài)改變之后查詢 location.href 也會返回與地址欄中相同的地址。另外，第二個參數(shù)目前還沒有瀏覽器實現(xiàn)，因此完全可以只傳入一個空字符串，或者一個短標題也可以。而第一個參數(shù)則應該盡可能提供初始化頁面狀態(tài)所需的各種信息。
因為 pushState() 會創(chuàng)建新的歷史狀態(tài)，所以你會發(fā)現(xiàn)“后退”按鈕也能使用了。按下“后退”按鈕，會觸發(fā) window 對象的 popstate 事件.
（2）replaceState
要更新當前狀態(tài)，可以調(diào)用 replaceState() ，傳入的參數(shù)與 pushState() 的前兩個參數(shù)相同。調(diào)用這個方法不會在歷史狀態(tài)棧中創(chuàng)建新狀態(tài)，只會重寫當前狀態(tài)。
?
注：
（1）新URL必須和當前URL在同一個源下;否則，pushState() 將丟出異常。
（2）pushState()方法絕不會導致hashchange 事件被激活。
2、示例
<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>JavaScript歷史狀態(tài)管理</title></head><body><div id="historyEvent">history API</div><script>var historyEvent = document.getElementById('historyEvent');historyEvent.onclick = function() {//pushState 不能修改網(wǎng)頁標題 history.pushState(null, '新標簽頁標題', '/123');document.title = '新標簽頁標題'}</script></body></html>?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結(jié)
以上是生活随笔為你收集整理的JavaScript历史状态管理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： npm和yarn的区别，我们该如何选择?
- 下一篇： gradle idea java ssm