H5中對history棧的操作

今天研究一下H5中history操作的相關知識，首先梳理一下基本內容：

一、在history中的跳轉

使用 back(), forward()和 go() 方法來完成在用戶歷史記錄中向后和向前的跳轉。

window.history.back();
window.history.forward();
window.history.go(-1);
window.history.go(1);

可以通過查看長度屬性的值來確定的歷史堆棧中頁面的數量:

let numberOfEntries = window.history.length;

二、添加和修改歷史記錄中的條目，即對history棧的操作

HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。這些方法通常與window.onpopstate 配合使用。

使用 history.pushState() 可以改變referrer，它在用戶發送 XMLHttpRequest 請求時在HTTP頭部使用，改變state后創建的 XMLHttpRequest 對象的referrer都會被改變。因為referrer是標識創建  XMLHttpRequest 對象時 this 所代表的window對象中document的URL。

pushState() 方法:

　　需要三個參數: 一個狀態對象, 一個標題 (目前被忽略), 和 (可選的) 一個URL

　　注意 pushState() 絕對不會觸發 hashchange 事件，即使新的URL與舊的URL僅哈希不同也是如此。

let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

replaceState() 方法:

history.replaceState() 的使用與 history.pushState() 非常相似，區別在於  replaceState()  是修改了當前的歷史記錄項而不是新建一個。 注意這並不會阻止其在全局瀏覽器歷史記錄中創建一個新的歷史記錄項。

replaceState() 的使用場景在於為了響應用戶操作，你想要更新狀態對象state或者當前歷史記錄的URL。

let stateObj = {
    foo: "bar",
};

history.pushState(stateObj, "page 2", "bar.html");

popstate 事件:

每當活動的歷史記錄項發生變化時， popstate 事件都會被傳遞給window對象。並且popstate 被觸發時能得到的狀態對象。

當然，也可以直接讀取當前歷史記錄項的狀態對象state，而不必等待popstate 事件， 只需要這樣使用history.state 屬性：