JavaScript Window History 学习笔记

在 JavaScript 中，Window 对象提供了一个 History 对象，它可以让我们以编程的方式访问浏览器的历史记录。这个对象通常用于前端页面中的“后退”和“前进”按钮的实现。

History 对象的基本操作

1. 返回到上一个历史记录

语法：

javascriptCopy Code
history.back();

示例：

htmlCopy Code
<button onclick="history.back()">返回</button>

2. 前往下一个历史记录

语法：

javascriptCopy Code
history.forward();

示例：

htmlCopy Code
<button onclick="history.forward()">前进</button>

3. 前往历史记录中的指定页面

语法：

javascriptCopy Code
history.go(number);

其中，number 可以是正数、负数或 0，分别表示前进、后退和刷新。

示例：

htmlCopy Code
<button onclick="history.go(-2)">后退两页</button>

History 对象的属性

1. length 属性

获取历史记录中的页面数目。

示例：

javascriptCopy Code
console.log(history.length);

2. current 属性

获取当前页面的 URL。

示例：

javascriptCopy Code
console.log(history.current);

History 对象的事件

1. popstate 事件

当用户点击“后退”或“前进”按钮时触发。

示例：

javascriptCopy Code
window.addEventListener("popstate", function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

以上就是 JavaScript Window History 的基本用法，希望对大家的学习有所帮助。