js怎么获取页面历史标题列表

JS获取页面历史标题列表的方法有以下几种：使用浏览器历史API、手动记录历史标题、利用第三方库。

其中，使用浏览器历史API 是最常见且有效的方法。浏览器历史API允许开发者访问和操作浏览器的历史记录，但需要注意的是，API本身并不直接提供页面标题的访问功能。因此，需要结合其他方法，例如手动记录页面标题。

一、浏览器历史API的基本介绍

浏览器历史API提供了一个接口来与浏览器的历史记录进行交互。它的主要方法包括 history.pushState() 和 history.replaceState()，可以用来添加或修改历史记录条目。

1、`history.pushState()`

history.pushState(state, title, url) 方法将一个新的状态信息添加到会话历史记录中。state 是一个对象，包含与新历史记录条目关联的状态数据；title 是一个可选的标题；url 是可选的新的URL。

history.pushState({pageTitle: document.title}, document.title, window.location.href);

2、`history.replaceState()`

history.replaceState(state, title, url) 方法修改当前历史记录条目，而不会创建新的条目。

history.replaceState({pageTitle: document.title}, document.title, window.location.href);

二、手动记录页面标题

由于浏览器历史API并不直接提供访问历史标题的功能，因此我们可以在每次页面加载或标题变更时，手动记录页面标题。

1、记录页面标题

在页面加载和标题变更时，使用JavaScript记录页面标题。可以将标题存储在一个数组中，并在需要时进行访问。

let titleHistory = [];
function recordTitle() {
    titleHistory.push(document.title);
}
window.addEventListener('load', recordTitle);
window.addEventListener('popstate', recordTitle);

2、获取页面历史标题列表

我们可以通过访问 titleHistory 数组来获取页面历史标题列表。

function getTitleHistory() {
    return titleHistory;
}

三、结合历史API与手动记录

将历史API与手动记录结合使用，可以更好地管理和访问页面标题历史。

1、更新历史记录

在页面状态变化时，更新历史记录，并记录页面标题。

function updateHistory() {
    history.pushState({pageTitle: document.title}, document.title, window.location.href);
    recordTitle();
}
document.addEventListener('DOMContentLoaded', updateHistory);
window.addEventListener('popstate', updateHistory);

2、访问历史记录

使用 getTitleHistory() 方法访问页面历史标题列表。

console.log(getTitleHistory());

四、利用第三方库

有一些第三方库可以简化历史记录管理和页面标题记录。例如，使用 History.js 可以更方便地操作浏览器历史记录和管理页面标题。

1、安装和引入库

首先，需要安装和引入 History.js 库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.8/bundled/html5/native.history.js"></script>

2、使用库进行记录和访问

使用 History.js 可以更方便地记录和访问页面标题。

History.Adapter.bind(window, 'statechange', function() {
    let state = History.getState();
    console.log(state.title);
});
History.pushState({pageTitle: document.title}, document.title, window.location.href);

五、总结

获取页面历史标题列表主要有以下几种方法：使用浏览器历史API、手动记录历史标题、利用第三方库。其中，结合使用浏览器历史API与手动记录的方法较为常见。通过手动记录页面标题，开发者可以方便地访问和管理页面历史记录。此外，使用第三方库如 History.js 也可以简化这一过程。无论选择哪种方法，都需要注意管理和维护页面历史记录，以确保用户体验的顺畅和一致性。