浏览器History详解

一、前言

history 对象提供了对浏览器的会话历史的访问它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。

在history对象中会保留用户在当前标签页的历史记录，但是由于安全方面考虑无法从history对象中获取当前的网页的url（可以通过location对象属性获取）；可以通过history.length去访问历史记录的页面栈数量（最大不要超过50）；

下面就让我们详细介绍一下history的常用属性和方法；

二、History实例属性

注意：History 接口不继承于任何属性。

2.1 length页面历史长度（只读属性）

返回一个整数（Integer），该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回 1。

2.2 scrollRestoration设置默认滚动恢复行为

允许 Web 应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

当我们页面滚动到某一高度时，当刷新页面后想要回到刷新前位置便可设置history.scrollRestoration为auto；默认值为manual。

2.3 state页面状态值（只读）

返回一个表示历史堆栈顶部的状态的任意（any）值。这是一种不必等待 popstate事件而查看状态的方式。

跳转页面时可以设置跳转页面的状态值。也可以通过pushState来设置url状态信息。

三、实例方法

3.1 back() 返回上一页

back()方法会在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。

3.2 forward() 前进下一页

forward()方法会在会话历史记录中向前移动一页。如果没有下一页，则此方法调用不执行任何操作。

3.3 go(delta) 跳转特定页面

go(delta)方法从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。

delta传参整数（Integer），相对于当前页面你要去往历史页面的位置。负值表示向后移动，正值表示向前移动；如果未向该函数传参或delta相等于 0，则该函数与调用location.reload()具有相同的效果。

3.4 pushState() 增加历史栈

history.pushState(state, unused, [url]) 方法向浏览器的会话历史栈增加了一个条目。此方法是异步的。为 popstate事件增加监听器，以确定导航何时完成。

从某种程度来说，调用 pushState() 类似于 window.location = "#"，它们都会在当前的文档中创建和激活一个新的历史条目。

3.4.1 state

state 对象是一个 JavaScript 对象，其与通过 pushState() 创建的新历史条目相关联。每当用户导航到新的 state，都会触发 popstate事件，并且该事件的 state 属性包含历史条目 state 对象的副本。可以为空

3.4.2 unused

由于历史原因，该参数存在且不能忽略；传递一个空字符串是安全的，以防将来对该方法进行更改。

3.4.3 url（可选）

新历史条目的 URL。请注意，浏览器不会在调用 pushState() 之后尝试加载该 URL，但是它可能会在以后尝试加载该 URL，例如，在用户重启浏览器之后。新 URL 可以不是绝对路径；如果它是相对的，它将相对于当前的 URL 进行解析。

3.5 replaceState() 替换历史记录实体

replaceState(stateObj, title[, url])方法使用state objects, title,和 URL 作为参数，修改当前历史记录实体，如果你想更新当前的 state 对象或者当前历史实体的 URL 来响应用户的的动作的话这个方法将会非常有用。

这个方法主要优点：会替换浏览器地址栏地址，但页面并不会重新载入或跳转。

简单适用场景：在页面跳转时，常常需要在打开新页面之前改变URL，会不断打开新的界面增加历史记录长度。使用history.replacestate()可以避免生成新的历史记录，可以避免用户频繁回退影响体验；

四、popstate监听事件

用于监听当前标签页历史记录状态发生改变时触发的监听事件。

4.1 事件触发条件

• history对象出现变化时；
• 调用back()、forward()、go()方法时；

注意：调用pushState方法或replaceState方法并不会触发事件；

4.2 适用场景

• 监听浏览器前进或后退行为；
• 可以监听用户何时离开当前页面；