通過haschange事件,可以知道URL的參數什麽時候發生了變化,也就是什麽時候該有所反應。通過狀態管理的API,能夠在不加載新頁面的情況下改變瀏覽器的URL。所以需要使用history.pushState()方法。history.pushState()方法接收三個參數:1.要存的內容 2.標題(壹般寫個空的字符串) 3.地址(可選)。小例子如下
執行了history.pushState()方法後,新的狀態信息就會被加入到歷史狀態棧,而瀏覽器地址欄也會變成新的相對URL。但是,瀏覽器並不會想服務器發送請求,即使歷史狀態改變之後查新location.href也會返回與地址欄中相同的地址。另外,第二個參數目前還沒有瀏覽器實現,所以完全可以只傳入壹個空字符串即可,或者壹個短標題也可以。第壹個參數則應該盡可能提供初始化頁面狀態所需的各種信息。
因為history.pushState()方法會創建新的歷史狀態,所以會發現”後退”按鈕也可以使用了。按下”後退”按鈕,會觸發window對象的popstate事件。Popstate事件的事件對象有壹個state屬性,這個屬性就包含著當初以第壹個參數傳遞給pushState()的狀態對象。小例子如下
更新狀態直接更新當前地址欄的內容,他不會產生後退操作,只是單純修改當前地址。
要更新當前歷史狀態,可以調用replaceState(),傳入的參數與pushState()方法的前兩個參數相同。調用replaceState()不會在歷史狀態棧中創建新狀態,只會重寫當前狀態。小例子如下
網上例子:
他這個還是創建了壹個數組,然後把生成的內容存到數組中,在根據傳的值
把數組對應的內容給讀出來。
history有個問題是第壹次點擊是無效的,只有第二次才能起作用。這就非常的不爽了。
通常我們也不會需要他執行特別復雜的操作,反而是hash非常的好用。
hash是直接在url後面加壹個#,然後立即可以被onpopstate事件檢測到。
於是我們可以這樣去做: