History Api以及hash操做

http://www.javashuo.com/article/p-kaktidyq-cc.html

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

事件類型一欄表：https://developer.mozilla.org/zh-CN/docs/Web/Events

Hash

修改hash以及檢測hash變化的兩種方式：

<a href="#two">click to change hash two</a>
<button onclick="location.hash='a'+Math.random()">隨機hash</button>
<script>
    window.onhashchange = function(){
        console.log(location.hash)
    }

    window.addEventListener("hashchange",function(){
        console.log(location.hash)
    })
</script>

hash值會附在瀏覽器url地址的尾部，如www.xx.com?a=123#one。hash被修改以後，能夠點擊後退前進，回到修改先後的頁面，hashchange事件會被觸發，頁面不會刷新。

 

ps：回顧事件綁定的規律，對於事件xx，有如下三種方式綁定

1. dom.onxx = ...
2. addEventlistener('xx',...)
3. attachEvent('onxx',...)

History Api

使用pushState，能夠實現修改瀏覽器的url，卻不發送頁面請求，頁面沒有刷新，點擊後退按鈕能夠回到修改前的url，前進或者後退，頁面都不會刷新（由於頁面始終是同一個document，前進後退的過程會觸發onpopstate事件），也不會有新的網絡請求，給人的感受就像是僅僅切換了url的顯示同樣。

而replaceState，僅僅是替換當前的url，除此以外沒任何變化。

 

對於如下代碼，頁面第一次打開的時候，無輸出，瀏覽器地址變爲了index.html，此時點擊後退，會打印pushState前的地址，點擊前進，會打印index地址

<script>
    history.pushState(null,"","http://localhost:8888/index.html")
    window.onpopstate = function(){
        console.log(location.href)
    }
</script>

也就是說，僅當使用了pushState，而後點擊前進或後退，這個事件纔會被觸發。

應用場景

　　我但願把一個頁面發給別人看，就把地址發了過去，但發現別人看的頁面的狀態和我如今的頁面狀態不一致。這種不一致的緣由是，頁面中使用了異步請求，而進行了多少次異步請求以及請求了什麼，這些頁面的狀態並不能反映到url上面，因此把url發給別人，我頁面的狀態固然也就不能再別人那裏重現了。

　　解決的辦法是把頁面中的異步請求信息添加到url上，或者說異步請求的信息要與url進行同步，步驟以下：當第一次打開頁面的時候，獲取url，根據url中的信息進行異步請求，達到url與頁面狀態進行同步。當用戶在頁面上進行交互，觸發了異步請求，完成後也要修改url，達到頁面狀態與url的同步。

　　以上關鍵的地方就是修改url，但不能從新刷新，由於一刷新的話頁面的狀態又回到原點了，不是咱們想要的。修改url就須要用到以上的hash 和 history api了，也能夠添加query 參數（replaceState替換爲原來的地址，只不事後面加上參數）

 

對比hash和history api。

　　相同點：修改hash對應pushState，hashchange事件對應popstate事件，二者的行爲表現一致：切換的時候頁面不刷新，改變的時候會留下歷史記錄，可供用戶前進或後退。

　　不一樣點：history api 比 hash 多出來一個replaceState方法，以及修改後的url格式不一樣而已