JavaScript BOM --- History 浏览历史记录对象

window.history 是一个只读属性，用来获取 History 对象引用。History 保存着用户浏览历史记录，它对象提供了操作浏览器会话历史（浏览器地址栏中访问的页面，以及当前页面中通过框架加载的页面）的接口。

从中我们可以提取三点信息：只读属性、History的实例、可以操作浏览器 session 级别的 url。

一、window.history 是一个只读属性

二、history 对象

history 对象保存着用户的上网历史，从用户窗口的时候就开始记录。history 是 window 对象的属性，所以每个浏览器窗口、标签、框架都有自己的 history 对象，并与其自己的 window 对象关联。

三、操作 session 级别的 url

前面讲了这么多，history 到底有啥用途呢？

我们做一个不是很恰当的比方。我们看做 history 内部有一个栈，这个栈用来存放当前浏览器 session 级别（关闭前）的同一个 tab 下所有访问过的 url ，当然这个栈是不可见的（出于安全的角度）。

从图中我们可以看到，history 对象并没有暴露存放历史 url 的属性。所以我们并不能通过类似如下方法操作会话历史：

window.history.url = "http://www.up8.wang"

这种方法是不可行的，也是非常不安全的。W3C 也是出于安全的角度规定了不对外部暴露这样的属性。

四、history 的属性及方法

那么，我们可以通过哪些属性和方法来操作浏览器的会话历史呢？

我们来看看 w3c 对 History 接口的定义：

interface History {
  readonly attribute unsigned long length; 
  attribute ScrollRestoration scrollRestoration;                                //HTML5.1
  readonly attribute any state;                                                        //HTML5
  void go(optional long delta = 0);
  void back();
  void forward();
  void pushState(any data, DOMString title, optional DOMString? url = null);         //HTML5
  void replaceState(any data, DOMString title, optional DOMString? url = null);      //HTML5
};

4.1、`length` 属性

length 属性是记录进入会话历史的 url 的数目，注意是 readonly !

当我们第一次打开浏览器后，在控制台中输入 history.length, 得到 1，在地址栏，每输入一次网址回车后，其 length 加 1，即使连续输入的是同一个地址。

4.2、`back` 方法

此方法忽视一切参数，如果已经到最早的一个，则再次调用不做任何处理。

4.3、`forward` 方法

调用次方法相当于点击浏览器的前进按钮。此方法忽视一切参数，如果已经到最新的一个，则再次调用不做任何处理。

4.4、`go` 方法

可加载历史列表中的某个具体的页面此方法的推荐参数为整数类型，如果传入的是浮点数，则自动舍去小数位。传入负数：后退传入整数：前进传入0或非数值类型：刷新当前页面传入的数值超出前进或后退的范围：不做任何处理

state 返回一个表示历史堆栈顶部的状态的值。 popstate 事件触发时，该对象会传入回调函数。 只读属性，不能直接修改，可以通过 pushSate 和 replaceState 操作。
pushState 在 history 栈中添加一个新的记录。参数： state：如果不需要这个对象，此处可以填 null title：现在大多数浏览器不支持或者忽略这个参数，最好用 null 代替 url：任意有效的 URL，用于更新浏览器的地址栏，并不在乎 URL 是否已经存在地址列表中。更重要的是，它不会重新加载页面。
replaceState 在 history 栈中替换当前记录，其他和 pushState 一样。
ScrollRestoration 前进后退时滚动条的位置。可修改属性，属性值： auto: 默认，保留上一次的滚动条位置。 manual：滚动条位置为初始化位置（垂直方向置顶，水平方向最左边）

Reference
History - MDN
Session history and navigation

felix-cao / Blog