浏览器中的history详解

通过window.history可以访问浏览器的会话历史记录，同时它暴露了很多有用的方法和属性，允许你在浏览历史中向前和向后跳转。

属性

1. length

会话历史中元素的数目。例如，在一个新的选项卡加载的一个页面中，这个属性返回 1。

2. scrollRestoration

允许 web 应用程序在历史导航上显式地设置默认滚动恢复行为。

值

• auto: 将恢复用户已滚动到的页面上的位置。
• manual: 未还原页上的位置。用户必须手动滚动到该位置。

可以手动给scrollRestoration赋值来改变滚动行为。

3. state

history堆栈顶部的状态的值。

如果是直接在新标签页输入URL，此时获取到的state为null。只有在通过pushState或者replaceState后才会有值。

同时可以在state中提前获取pushState后的状态。

console.log(`History.state before pushState: ${JSON.stringify(history.state)}`);

// Now push something on the stack
history.pushState({name: 'Example'}, "pushState example", 'page3.html');

// Now state has a value.
console.log(`History.state after pushState: ${JSON.stringify(history.state)}`);
1
2
3
4
5
6
7

方法

1. back

在浏览器历史记录里前往上一页，用户可点击浏览器左上角的返回按钮模拟此方法。等价于 history.go(-1)。

当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。

2. forward

在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法。等价于 history.go(1).

当浏览器历史栈处于最顶端时 ( 当前页面处于最后一页时 ) 调用此方法没有效果也不报错.

3. go

通过当前页面的相对位置从浏览器历史记录加载页面。比如：参数为-1 的时候为上一页，参数为 1 的时候为下一页。当整数参数超出界限时，例如：如果当前页为第一页，前面已经没有页面了，传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者参数值为 0 时，重新载入当前页面。

4. pushState

按指定的名称和 URL（如果提供该参数）将数据 push 进会话历史栈中，添加一个状态。

语法：

history.pushState(state, title[, url])
1

参数

• state: 一个与指定网址相关的状态对象(json格式，限制在2MB)
• title: 当前大多数浏览器都忽略此参数，尽管将来可能会使用到，通常传入空字符''。
• url: （可选）新历史记录条目的 URL 由此参数指定，但是，浏览器在调用pushState后不会加载此URL。如果未指定此参数，则将其设置为文档的当前 URL。

5. replaceState

更新当前的 state 对象或者当前历史实体的 URL，使用该方法改变的URL并不能通过history.back等方法返回替换前的URL.

语法：

history.replaceState(state, title[, url])
1

参数同pushState一样