JavaScript history对象详解

什么是history对象

history对象是JavaScript的一个属性，它代表了用户在浏览器中访问过的URL记录，通过它，我们可以非常方便地在浏览器历史记录中前进或后退，也可以获取浏览器的历史记录以及当前页面所处的位置。

history对象的使用

前进和后退

在history对象中，最基本的方法就是back()和forward()，分别用于回退和前进到浏览器的历史记录中的上一条和下一条记录。

// 回退到上一条历史记录
history.back();

// 前进到下一条历史记录
history.forward();

浏览器历史记录的操作

history对象提供了一系列的方法，用于操作浏览器的历史记录。下面是一些常用的方法：

length属性

获取历史记录中的记录数量。

alert(history.length);

go()方法

该方法用于跳到历史记录中第N条记录，跳的方式有两种：后退、前进。

如果参数N为正，就是前进到第N条记录，如果参数N为负数，就是后退到第N条记录。

// 后退到上两条记录
history.go(-2);

// 前进到下一条记录
history.go(1);

pushState()方法

该方法可以在不重新加载页面的情况下，向浏览器历史记录中添加一条记录。语法如下：

history.pushState(state, title, url);

参数说明：

• state: 一个JavaScript对象，用于存储当前状态。
• title: 新页面的标题，Firefox浏览器不支持该参数。
• url: 新页面的URL，可以是相对或绝对路径。

示例：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

replaceState()方法

该方法可以用于修改当前状态，参数说明同pushState()方法。与pushState()方法的区别在于，它修改的是当前的状态，而非添加一个新的状态。

示例：

var stateObj = { foo: "bar" };
history.replaceState(stateObj, "page 2", "bar.html");

新页面加载之前的处理

浏览器在进入一个新的网页地址之前，会先触发beforeunload事件，我们可以在该事件中添加一些逻辑，比如确认用户是否要离开当前页面，或者将当前状态存储在本地存储中等等。

下面是一个示例：

window.addEventListener('beforeunload', function (e) {
  // 询问用户是否要离开当前页面
  var confirmationMessage = '你确定要离开该页面吗？';
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;
});

参考链接

• W3Schools history object
• MDN history API