历史记录管理（window.history）

guyan0319 发布于2019-08-22 15:54 / 2108人阅读

摘要：代码在这以上这种不请求页面的情况是没有历史记录的，后退按钮用不了。增加的事件和可以在这种情况下进行历史记录的管理。与差不多，就是不添加新的状态，而是修改掉当前所在记录的状态。

代码在这

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

私有云海外云主机记录历史历史记录天气历史记录网站历史记录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93851.html

国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

U2FsdGVkX1x 2019-08-23 17:10 评论0 收藏0
国内存在感最低的前端API——浏览器路由

摘要：最新一直在看关于和路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由的。在浏览器中实现前端路由主要有两种方式一个是我们常用的，另一个是提供的。该对象的和分别表示的各个部分，它们因此被称为分解属性。最新一直在看关于 Vue 和 React 路由这块的知识，最终发现这些路由框架的模块功能的实现都是基于浏览器原生路由 API 的。本着追根溯源的初心，于是就想着将浏览...

tolerious 2019-08-29 18:44 评论0 收藏0
前端路由实现-history

摘要：首发前端路由实现了解新增了两个和两个都接收三个参数状态对象一个对象，与用方法创建的新历史记录条目关联。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。该参数是可选的不指定的话则为文档当前。首发：前端路由实现（history）了解 HTML5 history新增了两个API:history.pushState和history.replaceState 两个API都接收三个...

YacaToy 2019-08-22 18:11 评论0 收藏0