js 实现浏览历史记录示例

下面是详细讲解如何使用JavaScript实现浏览历史记录的攻略。

一、利用浏览器自带的history对象

浏览器提供了一个内置的history对象，可以用它来获取和操作浏览器的历史记录。这个对象有以下几个常用方法：

• history.back() ：返回到上一次访问的页面
• history.forward() ：前进到上一次返回的页面
• history.go() ：可以通过参数控制前进或后退多少步

利用这些方法就可以非常方便地实现浏览历史记录。下面是一个简单的示例：

//监听浏览器的后退和前进事件
window.addEventListener('popstate', function(e) {
    console.log('历史记录变化', e.state);
});

//记录当前访问的页面，并添加到浏览器历史记录中
var stateObj = { page: "page1" };
history.pushState(stateObj, "page 1", "?page=1");

//再次记录当前访问的页面，并添加到浏览器历史记录中
stateObj = { page: "page2" };
history.pushState(stateObj, "page 2", "?page=2");

//后退到上一次访问的页面
history.back(); 

在这个示例中，我们监听了浏览器的后退和前进事件，当历史记录变化时会触发该事件。我们通过history.pushState()方法将页面记录到浏览器历史记录中，当用户点击后退按钮时会回到上一个已经记录的页面。在这个示例中，我们先记录了访问的第一个页面，再记录了访问的第二个页面，然后执行一次后退操作，页面会回到上一个已经记录的页面。

二、利用localStorage存储历史记录

除了使用浏览器自带的history对象，我们还可以使用localStorage来存储历史记录。localStorage是HTML5引入的一种存储数据的机制，可以将数据存储在浏览器本地。我们可以利用localStorage来存储用户浏览过的所有页面，然后在需要时读取出来。

以下是一个示例：

//获取存储在localStorage中的历史记录
var history = JSON.parse(localStorage.getItem('history')) || [];

//记录当前访问的页面，并添加到历史记录中
history.push({ page: 'page1', time: new Date() });

//将历史记录存储到localStorage中
localStorage.setItem('history', JSON.stringify(history));

//读取存储的历史记录
var history = JSON.parse(localStorage.getItem('history'));

在这个示例中，我们先从localStorage中获取历史记录，如果不存在则新建一个空数组。我们通过数组的push方法将当前访问的页面和时间添加到历史记录中，并将历史记录存储到localStorage中。当需要读取历史记录时可以使用localStorage.getItem()方法获取存储的历史记录，并通过JSON.parse()方法将字符串解析成数组。通过这种方式我们可以非常方便地实现浏览历史记录的存储和读取。

希望这个攻略能对你有所帮助。