歷史記錄管理（window.history）

guyan0319 發布于2019-08-22 15:54 / 2212人閱讀

摘要：代碼在這以上這種不請求頁面的情況是沒有歷史記錄的，后退按鈕用不了。增加的事件和可以在這種情況下進行歷史記錄的管理。與差不多，就是不添加新的狀態，而是修改掉當前所在記錄的狀態。

代碼在這

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對象時，用這個初始狀態設置頁面。

云服務器 GPU云服務器記錄歷史歷史記錄天氣歷史記錄網站歷史記錄

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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