歷史記錄管理（window.history）

代碼在這

<div>
    <input type="range" id="myRange">
    <span id="output"></span>
    <div>
        <progress id="myProgress" max="100"></progress>
    </div>
</div>

function toggle() {
    let value = $('#myRange').val()
    $('#output').text(value)
    $('#myProgress').val(value)
}
toggle()
$('#myRange').on('change', function () {
    toggle()
})

以上這種不請求頁面的狀況是沒有歷史記錄的，後退按鈕用不了。

H5 API增長的window.history.pushState()、window.onpopstate事件和window.history.replaceState()能夠在這種狀況下進行歷史記錄的管理。

它們管理着一個狀態對象棧和對應的URL，pushState()能夠爲棧中添加一個新的狀態對象和對應的URL，它們組成了一條記錄，能夠用這個對象設置頁面狀態。當點擊後退按鈕就觸發onpopstate事件，該事件回調參數中有event.state保存着pushState添加的上一個狀態對象，咱們用這個舊的狀態對象，就能夠讓頁面恢復到舊的狀態中。

replaceState()與pushState()差很少，就是不添加新的狀態，而是修改掉當前所在記錄的狀態。
還有個go(n)，跟點擊後退按鈕差很少，就是能夠指定後退多少，後退按鈕只能一頁一頁退。

let state,initState
window.onpopstate = popState
window.onload = firstTimeLoad
function firstTimeLoad() {
    state = {
        id:1,
        value: $('#myRange').val()
    }
    initState = Object.assign({},state)
    $('#myRange').on('change',changeAction)
    display(state)
}
function changeAction(){
    state.id++
    state.value = $(this).val()
    save(state)
    display(state)
}
function popState(event){
    if(event.state){
        state = event.state
        display(state)
    }else{
        display(initState)
    }
}
function save(state){
    let url = '#history-' + state.id
    window.history.pushState(state,'',url)
}
function display(state){
    $('#myRange').val(state.value)
    $('#output').text(state.value)
    $('#myProgress').val(state.value)
}

注意popState(event)方法中的else部分，由於在頁面onload時瀏覽器自己會往棧內添加第一個狀態對象，這個對象是null，棧就會這樣[null,記錄1,記錄2...]，所以在頁面加載firstTimeLoad()方法裏記錄初始狀態，好在回退到爲null對象時，用這個初始狀態設置頁面。