當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript历史状态管理
生活随笔
收集整理的這篇文章主要介紹了
JavaScript历史状态管理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、API
（1）history.pushState：能夠在不加載新頁面的情況下改變瀏覽器的 URL
history.pushState({name:"Nicholas"}, "Nicholas' page", "nicholas.html");執行 pushState() 方法后，新的狀態信息就會被加入歷史狀態棧，而瀏覽器地址欄也會變成新的相對 URL。
但是，瀏覽器并不會真的向服務器發送請求，即使狀態改變之后查詢 location.href 也會返回與地址欄中相同的地址。另外，第二個參數目前還沒有瀏覽器實現，因此完全可以只傳入一個空字符串，或者一個短標題也可以。而第一個參數則應該盡可能提供初始化頁面狀態所需的各種信息。
因為 pushState() 會創建新的歷史狀態，所以你會發現“后退”按鈕也能使用了。按下“后退”按鈕，會觸發 window 對象的 popstate 事件.
（2）replaceState
要更新當前狀態，可以調用 replaceState() ，傳入的參數與 pushState() 的前兩個參數相同。調用這個方法不會在歷史狀態棧中創建新狀態，只會重寫當前狀態。
?
注：
（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歷史狀態管理</title></head><body><div id="historyEvent">history API</div><script>var historyEvent = document.getElementById('historyEvent');historyEvent.onclick = function() {//pushState 不能修改網頁標題 history.pushState(null, '新標簽頁標題', '/123');document.title = '新標簽頁標題'}</script></body></html>?
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的JavaScript历史状态管理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： npm和yarn的区别，我们该如何选择?
- 下一篇： 浅谈 JSON.stringify 方法