HTML5HistoryAPI用法简介_知识百科

HTML5 History API 是 HTML5 标准中的一部分，它提供了一种在不刷新页面的情况下改变浏览器地址栏URL的方法。它的使用方法很简单，主要有以下几个步骤：

// 使用pushState()方法改变URL
history.pushState(stateObj, title, url);

pushState()方法用于改变URL，它接受三个参数：stateObj、title和url。stateObj是一个JavaScript对象，用于存储一些可选的状态信息；title是一个字符串，但是当前的浏览器都忽略它；url是一个字符串，用于指定要改变的URL。

// 使用replaceState()方法替换URL
history.replaceState(stateObj, title, url);

replaceState()方法与pushState()方法类似，也用于改变URL，但是它不会把当前的URL放入历史记录中，而是把新的URL替换掉旧的URL。

// 使用popstate事件监听URL改变
window.addEventListener('popstate', function(event) {
  // 执行相关操作
});

当URL改变时，会触发popstate事件，我们可以使用addEventListener()方法来监听这个事件，当它被触发时，我们就可以执行相关操作。

// 使用go()方法前进或后退
history.go(steps);

go()方法可以用来前进或后退，它接受一个参数steps，表示要前进或后退的步数，正数表示前进，负数表示后退。

// 使用length属性获取历史记录的条数
var length = history.length;

length属性用于获取历史记录的条数，它是一个只读属性，可以通过它来判断前进或后退的步数。

// 使用back()和forward()方法前进或后退
history.back(); // 后退
history.forward(); // 前进

back()和forward()方法分别用于后退和前进，它们没有参数，每次调用都会前进或后退一步。

以上就是 HTML5 History API 的使用方法，它能够让我们在不刷新页面的情况下改变浏览器地址栏URL，为前端开发提供了更多的灵活性。

HTML5HistoryAPI用法简介