HTML 5提供了一个新的API：history，它能够操纵浏览器的历史记录信息

下面就对其进行简单的介绍

浏览历史

• 前进、后退

  1	window.history.forward()

  1	window.histroy.back()

• 到特定历史

  后退一个页面

  1	window.history.go(-1)

  前进一个页面

  1	window.history.go(1)

  前进或后退n个页面

  1 2	window.history.go(n) window.history.go(-n)

  使用go(0)或者go()刷新页面

  1 2	window.history.go(0) window.history.go() // 两个都相同

  获取历史记录长度

  1	window.history.length

对历史记录操作

HTML 5 添加了history.pushState()和history.replaceState()方法可以对历史记录条目进行添加或修改。

假设你在http://its-silver.com/blog执行了下面代码

1
2
3
4

let stateObj = {
    foo: 'bar'
}
history.pushState(stateObj, 'archive', 'archive')

页面地址就会显示http://its-silver.com/blog/archive

但是页面地址并不会发生跳转，vue-router的mode: history就是靠这个来实现的

pushState() 方法

参数

• state object

  使用history.state可以访问到当前记录的state，用于存储

• title

  似乎目前没啥作用

• URL

  浏览器显示的新地址，可以使用相对路径或绝对路径。如果发生跨域会产生报错

replaceState() 方法

history.replaceState()与history.pushState()行为相同，唯一的区别就是：

• history.replaceState()替换了当前历史记录

• history.pushState()添加了一条新纪录

popstate 事件

触发事件

• 点击前进或后退按钮
• 使用history.go() history.forward() history.back()

使用pushState()或者replaceState()并不会触发该事件

事件的 state 属性是当前历史记录 history.state 的拷贝

1
2
3
4
5
6
7
8
9
10

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // alerts "location: http://example.com/example.html, state: null
history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}

读取State

使用history.state读取当前记录的state

1

let currentState = history.state