History 对象

History 对象

History 对象允许 JavaScript 访问浏览器的历史记录。它提供了一些方法和属性，使我们能够在浏览器的历史记录中前进和后退，以及获取当前页面的 URL。

属性

length

该属性可以获得浏览器历史记录中的页面数量。

console.log(window.history.length); // 输出历史记录中页面数量

方法

back()

该方法可以让浏览器回到上一个页面，效果相当于点击浏览器的后退按钮。

window.history.back(); // 回到上一个页面

forward()

该方法可以让浏览器前进到下一个页面，效果相当于点击浏览器的前进按钮。

window.history.forward(); // 前进到下一个页面

go()

该方法可以让浏览器前进或后退指定的页面数，其中参数为正数时表示前进，负数时表示后退。如果参数为0，则重新加载当前页面。

window.history.go(1); // 前进到下一个页面
window.history.go(-1); // 回到上一个页面
window.history.go(0); // 重新加载当前页面

pushState()

该方法可以向浏览器历史记录中添加一条新纪录，并且不会刷新当前页面。它接受三个参数，分别为状态对象（state），页面标题（title），以及要添加的页面 URL。

window.history.pushState({ data: 'test' }, 'Test Title', '/test.html');

replaceState()

该方法可以替换浏览器历史记录中当前页面的记录，并且不会刷新当前页面。它接受三个参数，分别为状态对象（state），页面标题（title），以及要替换的页面 URL。

window.history.replaceState({ data: 'test' }, 'Test Title', '/test.html');

popstate 事件

当浏览器历史记录发生变化时，该事件就会被触发。通过监听该事件，我们可以实现在前进和后退时对页面进行不同的处理。

window.addEventListener('popstate', function(event) {
  console.log('Popstate event has been triggered!', event.state);
});

注意事项

  1. 由于浏览器历史记录存储在用户的设备上，所以在不同用户之间无法共享历史记录。
  2. 在 pushState 和 replaceState 方法中添加的状态对象只能是字符串、数值、布尔值、null 或 undefined。如果需要添加一个更复杂的数据结构，可以使用 JSON.stringify() 和 JSON.parse()。
  3. 当使用 pushState 或 replaceState 方法添加新纪录时，页面 URL 对象没有被加载，需要通过 AJAX 或其他方式来更新该页面。
  4. 在 pushState 和 replaceState 方法中，页面标题参数在大多数情况下都没有效果，它只是提供给开发者调试使用的。
  5. 在 Safari 5.x 和早期版本的 iOS 中，当使用 back() 和 forward() 方法时不会触发 popstate 事件。这个问题可以通过在 popstate 事件回调函数中进行额外的处理来解决。
DOM HTMLCollection HTML DOM Anchor 对象