关于history的一点心得

history.length

length 是指当前浏览过多少个页面，无论你是执行后退还是前进一页，history 都是不变的，除非在当前页面新打开一个链接，那么 history 就会加一。

history.pushState

history.pushState(State,Title,Url)，不跳转，新增一条历史记录，当前页面的 url 会变成 Url，但是不会刷新当前页面，如果此时新打开一个页面，后退会去到 Url 链接，但页面内容还是 url 的内容，再后退就会去到 url 链接，内容不变，就是 url 的内容。
需要注意的是，history.pushState 的 Url 不能跨域，否则会报错。

history.replaceState

history..replaceState(State,Title,Url)，不跳转，修改浏览历史中当前纪录，当前页面 url 的历史记录会被替换成指定的 Url，当前页面的 url 会变成 Url，直接替换掉原来的 url，相当于原来的 url 已经不存在，但是不会刷新当前页面，如果此时新打开一个页面，后退会去到 Url 链接，但页面内容会改变成 Url 的内容，再后退就没有可后退的链接了。
需要注意的是，history.replaceState 的 Url 不能跨域，否则会报错。

location.replace

location.replace(url) 会跳转至指定页面，当前页面 url 的历史记录不会保留，相当于替换了当前的历史记录

location.href

location.href：跳转至指定页面，当前页面 url 的历史记录会保留

window.onpopstate

每当同一个文档的浏览历史（即 history 对象）出现变化时，就会触发 popstate 事件。仅仅调用 pushState 方法或 replaceState 方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用 back、forward、go 方法时才会触发。使用的时候，可以为 popstate 事件指定回调函数。这个回调函数的参数是一个 event 事件对象，它的 state 属性指向 pushState 和 replaceState 方法为当前 URL 所提供的状态对象（即这两个方法的第一个参数 state）。如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

history.pushState({title:"login"}, "login", "/login");
window.onpopstate = function (event) {
   if(event.state) {
        var state = event.state.title;
        switch(state) {
           case "login":.............;break;
           case "join" :.............;break;
        }
     }
};
// 或者
window.addEventListener("popstate", function(event){
    if(event.state) {
        var state = event.state.title;
        switch(state) {
           case "login":.............;break;
           case "join" :.............;break;
        }
     }
}, false);

上面代码中的 event.state，就是通过 pushState 和 replaceState 方法，为当前 URL 绑定的 state 对象。这个 state 对象也可以直接通过 history 对象读取 history.state。

实践

最近做的一个需求是这样的：先由中转页 a 跳去目标页面 b，按回退按钮，跳去中间后台配置页面 b1，再按回退按钮跳去中间后台配置页面 b2，以此下去，只到跳转完所有后台配置的页面，最终跳回目标页面 b，再按返回退出所有页面。

用 history 来解释的话就是：

1

a->b->back->a->b1->back->b2->...->back->b->back->退出

用上面的知识来解决就是

1
2
3
4
5
6
7
8
9
10

a->b，在a页面，获取跳转url的b页面链接，替换参数，改变a链接成a*，即将a的历史记录修改成a*，执行
history.replaceState(null, document.title, a*);window.location.href = b;
回退，此时到a*，获取后台配置，执行
window.location.href = b1;
回退，此时到a*，获取后台配置，执行
window.location.href = b2;
....
后退回到a*，最后回到b，执行
window.location.replace(b);
再后退，退出页面

以上就是利用 history 和 location 解决的一个简单示例，其他的应用还可以是改变一个页面的 url 而不用刷新页面等。

参考教程:
history.pushState 无刷新改变 url

HTML5 历史状态管理 history API-pushState/replaceState 与 popstate 事件

原文转自：
https://www.jianshu.com/p/3d465fef9a2b