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 属性：