html历史记录代码,js 实现浏览历史记录示例
时间: 2024-01-20 18:04:30 浏览: 32
以下是一个简单的 HTML 和 JavaScript 示例,展示如何使用 JavaScript 来实现浏览器的历史记录:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>浏览历史记录示例</title>
</head>
<body>
<h1>浏览历史记录示例</h1>
<p>点击以下链接来测试浏览历史记录功能:</p>
<ul>
<li><a href="#" onclick="goToPage('page1.html')">页面1</a></li>
<li><a href="#" onclick="goToPage('page2.html')">页面2</a></li>
<li><a href="#" onclick="goToPage('page3.html')">页面3</a></li>
</ul>
</body>
</html>
```
JavaScript 代码:
```javascript
// 定义一个数组来存储浏览历史记录
var historyList = [];
// 定义一个函数来向数组中添加浏览历史记录
function addToHistory(page) {
historyList.push(page);
}
// 定义一个函数来访问之前的页面
function goBack() {
// 如果历史记录数组中有至少两个元素,则跳转到上一个页面
if (historyList.length >= 2) {
historyList.pop();
var previousPage = historyList.pop();
window.location.href = previousPage;
}
}
// 定义一个函数来跳转到指定的页面,并将该页面添加到历史记录数组中
function goToPage(page) {
window.location.href = page;
addToHistory(page);
}
```
以上代码实现了一个简单的浏览历史记录功能。当用户点击页面链接时,会调用 `goToPage` 函数来跳转到指定的页面,并将该页面添加到 `historyList` 数组中。当用户点击浏览器的后退按钮时,会调用 `goBack` 函数来访问之前的页面。