历史记录治理（window.history）

代码在这

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对象时，用这个初始状况设置页面。