代码在这里
functiontoggle(){让值=$('#myRange').val()$('#output').text(value)$('#myProgress').val(value)}toggle()$('#myRange').on('change',function(){toggle()})不存在上面那种不请求a的情况page从历史上看，后退按钮不起作用。H5API添加的window.history.pushState()、window.onpopstate事件和window.history.replaceState()可以在这种情况下管理历史记录。他们管理一堆状态对象和相应的URL。pushState()可以向堆栈添加一个新的状态对象和相应的URL。它们形成一个记录，这个对象可以用来设置页面状态。单击后退按钮时，会触发onpopstate事件。该事件的event.state回调参数保存了pushState最后添加的状态对象。我们可以使用这个旧状态对象将页面恢复到旧状态。replaceState()与pushState()类似，即不添加新状态，而是修改当前记录的状态。还有go(n)，类似于点击后退按钮，就是可以指定后退多少，后退按钮只能一页一页的后退。让状态，initStatewindow.onpopstate=popStatewindow.onload=firstTimeLoadfunctionfirstTimeLoad(){state={id:1,value:$('#myRange').val()}initState=Object.assign({},state)$('#myRange').on('change',changeAction)display(state)}functionchangeAction(){state.id++state.value=$(this).val()save(state)display(state)}函数popState(event){if(event.state){state=event.statedisplay(state)}else{display(initState)}}functionsave(state){leturl='#history-'+state.id窗口。历史.pushState(state,'',url)}functiondisplay(state){$('#myRange').val(state.value)$('#output').text(state.value)$('#myProgress').val(state.value)}注意popState(event)方法中的else部分，因为浏览器本身会在页面加载时将第一个状态对象添加到堆栈中。这个对象是null，栈会是这样[null,record1,record2...]，所以初始状态记录在页面加载firstTimeLoad()方法中，最好用这个初始状态来返回空对象时设置页面。
