访问窗口历史

利用 History 对象实现访问窗口历史， History 对象是一个只读的 URL 字符串数组。该对象主要用来存储一个最近所访问网页的 URL 地址的列表。

属性	额
length	历史列表的长度，用于判断列表中的入口数目
current	当前文档的 URL
next	历史列表的下一个 URL
previous	历史列表中的前一个 URL

方法	额
back()	退回前一页
forward （）	重新进入下一页
go()	进入指定的页面

例如，利用 History 对象中的 back 方法和 forward 方法来引导用户在页面中跳转。

✂️

 [forward](javascript:window.history.forward();)
//  <a href="javascript:window.history.back();">back</a>

还可以使用 history.go 方法指定要访问的历史记录。若参数为正数，则向前移动；若参数为负数，则向后移动。

✂️

html

<a href="javascript:window.history.go(-1);">向后退一次 </a>
<a href="javascript:window.history.back(2);">向后前进两次 /a></a>

使用 history.length 属性能够访问 history 数组的长度，可以很容易地转移到列表的末尾。

✂️

html

<a href="javascript:window.history.go(window.history.length-1);">末尾 </a>

history 对象的方法和属性

一般，浏览器会记住用户打开网址的历史，并且会在顶部的导航按钮中使用"前进"和"后退"按钮导航历史网址。并且，这个功能也对 JavaScript 开放 API ，使用 JavaScript 的 window.history()方法可以返回一个 history 对象（也可以直接使用 history()调用方法和属性，因为 window 可以省略）。

history （历史）对象指浏览器的浏览历史，使用该对象的方法和属性，就可以自定义前进和后退功能。鉴于安全性的需要，该对象的使用受到很多限制，现在仅定义了下列属性和方法。

length 属性，表示历史的项数

JavaScript 所能管理的历史被限制在用浏览器的"前进"和"后退"按钮可以前往的范围。本属性返回的值是"前进"和"后退"两个按钮之下包含的地址数的总和。

back()方法

表示后退，与单击"后退"按钮是等效的。其语法格式如下： history.back([num])

参数 num 是一个整数，表示后退的地址步数。该参数是可选的，如果省略，表示向后倒退一步。

forward()方法

表示前进，与单击"前进"按钮是等效的。该方法没有参数，其语法格式如下：

✂️

history.forward();

go()方法

可以跳转到特定的一个地址，其语法格式如下：

✂️

history.go([location]);

参数 location 可以是一个整数也可以是一个 URL 字符串。如果是一个整数，则表示相对于当前浏览的前进（正数）或后退（负数）的步数；如果是一个字符串，则表示历史列表中的某个 URL 。

如果 location 为 0，则刷新当前打开的网页，这与 location.reload()是等效的；如果 location 为 1，则等同于调用 history.forward()。

例如下面的代码：

✂️

html

<body>
  <input type=" button" value="后退" onclick=" javascript:history.back(-1);" />
  <input type=" button" value="前进" onclick=" javascript:history.forward();" />
  <input type=" button" value="刷新" onclick=" javascript:history.go(0);" />
</body>

技巧与提示

以上 history 对象的方法，如果找不到要到访的地址也不会出错，只是保持在当前网页。

HTML5BOM 新增功能

HTML5BOM 定义了两个新方法和一个新属性，用来添加和替换历史项。 pushState()方法添加新的浏览历史项； replaceState()方法更新当前浏览历史项； state 属性用于返回这两个方法添加的信息。这两个方法的语法格式如下：

✂️

window.history.pushState(data, title [,url])
window.history.replaceState(data, title [,url])

参数 data 定义历史记录的数据；参数 title 定义历史记录标题；参数 url 可选，定义历史记录的 URL 地址。

这两个方法的执行还会触发 popstate 事件，可以使用下面的代码捕捉：

✂️

window.onpopstate = function (event) {
  alert(event.state); // state 属性用于返回这两个方法添加的信息
};

目前这两个方法浏览器尚不支持，事件也不支持。

当使用"前进"、"后退"按钮切换网页时，还会触发 pageshow 事件（当网页成为当前网页时）和 pagehide 事件（当网页从当前网页改变为历史网页时），可以使用下面的代码捕捉：

✂️

window.onpageshow = function (event) {
  alert(event.persisted); // state 属性用于返回这两个方法添加的信息
};
window.onpagehide = function (event) {
  alert(event.persisted); // state 属性用于返回这两个方法添加的信息
};

这两个事件对象包含一个名为 persisted 的属性，如果一个网页是新加载的就返回 false ；否则，返回 true 。

历史状态管理

使用 HTML5 状态管理时，要确保通过 pushState()创建的每个"假" URL 背后都对应着服务器上一个真实的物理 URL 。否则，单击"刷新"按钮会导致 404 错误。所有单页应用程序（ SPA ， Single Page Application ）框架都必须通过服务器或客户端的某些配置解决这个问题。

hashchange 会在页面 URL 的散列变化时被触发，开发者可以在此时执行某些操作。而状态管理 API 则可以让开发者改变浏览器 URL 而不会加载新页面。为此，可以使用 history.pushState()方法。这个方法接收 3 个参数：一个 state 对象、一个新状态的标题和一个（可选的）相对 URL 。

pushState()方法执行后，状态信息就会被推到历史记录中，浏览器地址栏也会改变以反映新的相对 URL 。除了这些变化之外，即使 location.href 返回的是地址栏中的内容，浏览器页不会向服务器发送请求。第二个参数并未被当前实现所使用，因此既可以传一个空字符串也可以传一个短标题。第一个参数应该包含正确初始化页面状态所必需的信息。为防止滥用，这个状态的对象大小是有限制的，通常在 500KB ～ 1MB 以内。

✂️

let stateObject = { foo: 'bar' };
history.pushState(stateObject, 'My title', 'baz.html');

因为 pushState()会创建新的历史记录，所以也会相应地启用"后退"按钮。此时单击"后退" 按钮，就会触发 window 对象上的 popstate 事件。 popstate 事件的事件对象有一个 state 属性，其中包含通过 pushState()第一个参数传入的 state 对象。

✂️

window.addEventListener('popstate', event => {
  let state = event.state;
  if (state) {
    // 第一个页面加载时状态是 null
    processState(state);
  }
});

可以通过 history.state 获取当前的状态对象，也可以使用 replaceState()并传入与 pushState()同样的前两个参数来更新状态。更新状态不会创建新历史记录，只会覆盖当前状态。

传给 pushState()和 replaceState()的 state 对象应该只包含可以被序列化的信息。因此， DOM 元素之类并不适合放到状态对象里保存。