前端js如何查看每一条历史记录

在前端JavaScript中查看每一条历史记录，可以通过使用window.history对象、借助history.state属性、以及监听popstate事件。其中，window.history对象是用于操作浏览器会话历史的对象，history.state属性可以存储每个历史条目的状态数据，监听popstate事件可以监控历史条目的变化。下面详细介绍这些方法及其应用。

一、使用`window.history`对象

window.history对象是一个可以用来操作浏览器会话历史的对象。它包含了用户的浏览记录，并且提供了一些方法让我们可以操控这些记录。

1、`window.history.length`

通过window.history.length属性，我们可以获取当前会话中的历史记录条数。

console.log(window.history.length);

2、`window.history.back()`

window.history.back()方法用于加载历史记录中的前一个 URL，等同于点击浏览器的后退按钮。

window.history.back();

3、`window.history.forward()`

window.history.forward()方法用于加载历史记录中的下一个 URL，等同于点击浏览器的前进按钮。

window.history.forward();

4、`window.history.go()`

window.history.go()方法可以加载指定的历史记录条目。参数为相对当前条目的整数值。例如，window.history.go(-1)等同于window.history.back()。

window.history.go(-1);

二、借助`history.state`属性

每个历史条目都可以有一个状态对象，通过pushState和replaceState方法可以为每个历史条目添加状态信息。

1、`history.pushState()`

history.pushState(state, title [, url])方法可以向浏览器历史堆栈添加一个状态对象。

window.history.pushState({page: 1}, "title 1", "?page=1");

2、`history.replaceState()`

history.replaceState(state, title [, url])方法可以修改当前历史条目的状态信息。

window.history.replaceState({page: 2}, "title 2", "?page=2");

3、获取当前历史状态

可以通过history.state属性获取当前历史条目的状态对象。

console.log(window.history.state);

三、监听`popstate`事件

popstate事件会在浏览器会话历史记录发生变化时触发，例如用户点击浏览器的前进或后退按钮时。

1、添加`popstate`事件监听器

通过添加popstate事件监听器，可以捕捉到每次历史记录变化的事件。

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

2、处理`popstate`事件

在popstate事件处理函数中，可以根据event.state来决定如何操作。

window.addEventListener('popstate', function(event) {
    if (event.state) {
        // 根据 event.state 执行相应的操作
        console.log('State:', event.state);
    }
});

四、结合`sessionStorage`存储每一条历史记录

由于window.history对象无法直接获取所有历史记录，我们可以结合sessionStorage来手动存储每一条历史记录。

1、初始化存储

在页面加载时，初始化存储当前的历史记录。

if (!sessionStorage.getItem('history')) {
    sessionStorage.setItem('history', JSON.stringify([]));
}

2、存储每次的历史记录

每次通过pushState或replaceState修改历史记录时，都存储相应的信息。

function storeHistory(state, title, url) {
    const history = JSON.parse(sessionStorage.getItem('history'));
    history.push({ state, title, url });
    sessionStorage.setItem('history', JSON.stringify(history));
    window.history.pushState(state, title, url);
}

3、查看所有历史记录

通过读取sessionStorage中的数据，可以查看所有历史记录。

function getHistory() {
    return JSON.parse(sessionStorage.getItem('history'));
}

总结

在前端JavaScript中查看每一条历史记录，主要通过使用window.history对象、借助history.state属性来存储和获取状态信息，并监听popstate事件来捕捉历史记录变化。另外，结合sessionStorage来手动存储每一条历史记录，可以更方便地查看所有历史记录。通过这些方法，我们可以更好地操作和管理浏览器的历史记录，提高用户体验。

前端js如何查看每一条历史记录

一、使用window.history对象

1、window.history.length

2、window.history.back()

3、window.history.forward()

4、window.history.go()

二、借助history.state属性

1、history.pushState()

2、history.replaceState()