HTML5之歷史記錄（實現的當頁面應用路由器的底層）

• history
• hashchange與popstate

 一、history

• history.back()：加載history列表中的前一個URL
• history.forward()：加載history列表中的下一個URL
• history.go(n)：加載history列表中的某一個具體頁面
• history.length.：返回歷史列表中的網址數
• history.pushState(state,title,url)：添加一條歷史記錄（HTML5）
• history.replaceState(state,title,url)：替換當前的歷史記錄（HTML5）

pushState與replaceState中的參數：

state：一個指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調中。如果不需要這個對象，此處可以填null。

title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。

url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。

 二、history的hashchange與popstate事件

為什么history.pushState()與history.replaceState()能實現單頁面應用呢？

關鍵在於history.pushState()與history.replaceState()執行添加和替換歷史記錄會改變瀏覽器地址欄的URL，但不會刷新整個頁面。

並且history還有兩個監聽url變化的事件：

• popstate事件：歷史記錄發生改變時觸發（瀏覽器前進后退切換頁面時觸發）
• hashchange事件：當頁面的hash值發生改變的時候觸發（瀏覽器前進后退切換頁面時觸發）

基於pushState與replaceState可以實現修改歷史記錄，但是點擊瀏覽器的前進后退按鈕時不能回退到之前頁面的，僅僅只是修改地址欄的URL，這時候就需要引用到一個關鍵的參數pushState與replaceState中的參數state。這個參數會在歷史記錄發生改變時添加到popstateEvent對象上，而且popstate事件是在瀏覽器前進后退時觸發，那么這時候只需在pushState於replaceState方法中添加記錄頁面信息的數據，當瀏覽器通過前進后退按鈕切換頁面時，就可以根據popstate事件的popstateEvent事件對象獲取頁面信息數據來刷新頁面。

基於popstate實現模擬單頁面的基本邏輯：

<input type="text" id="searchWord" value="">
<input type="button" id="btn" value="提交">
<div class="content"></div>
<script>
    var data = [{name:"HTML"},{name:"CSS"},{name:"javascript"},{name:"es6"},{name:"vue"},{name:"nodejs"}];
    
    var content = document.getElementsByClassName('content')[0];
    var btn = document.getElementById('btn');
    var inp = document.getElementById('searchWord');
    btn.onclick = function(){
        var showData = data.filter(function(item){
            return item.name.indexOf(inp.value) > -1;
        });
        renderDom(showData);
        history.pushState({
            value:inp.value
        },null,'#'+inp.value);
    }
    function renderDom(data){
        var str = '';
        for(var i = 0; i < data.length; i++){
            str += '<div>' + data[i].name + '</div>'
        }
        content.innerHTML = str;
    }
    renderDom(data);
    window.addEventListener('popstate',function(e){
        var value = e.state ? e.state.value : '';
        var showData = data.filter(function(item) {
            console.log(e);
            return item.name.indexOf(value) > -1;
        });
        inp.value = value;
        renderDom(showData);
    },false)
</script>

實現效果：

但是，popstate事件的兼容性相對hashchange事件，hashchange可以兼容到IE8，popstate事件只能兼容到IE10，所以在單頁面應用中更多應用的是hashchange事件來實現，但是相對popstate事件可以獲取到history.pushState()與history.replaceState()傳遞的state對象參數，hashchange事件只能通過hash值來實現數據傳遞。

window.addEventListener('hashchange',function(e){
    console.log(location.hash); //獲取hash值
})