Web History API 记录：浏览历史与状态追踪

2023-11-21 09:06:27

Web History API 概述

Web History API 允许网页记录用户访问的历史记录，以便用户可以通过前进和后退按钮在访问的页面之间导航。它还允许网页以编程方式控制历史记录，例如，可以通过脚本将用户定向到特定页面或在历史记录中创建新的条目。

history.back() 方法在 history 中向后跳转，和点击浏览器回退按钮的效果相同。例如：

history.back();

history.forward() 方法在 history 中向前跳转，和点击浏览器前进按钮的效果相同。例如：

history.forward();

history.go() 方法允许你跳转到历史记录中的特定位置。例如，要跳转到历史记录中的前两个页面，可以使用以下代码：

history.go(-2);

history.length 属性返回历史记录中条目的数量。例如：

console.log(history.length); // 输出: 5

Web History API 还可用于进行状态追踪。例如，你可以使用 history.pushState() 方法将新状态添加到历史记录中，然后使用 history.replaceState() 方法替换当前状态。这对于需要在应用程序中追踪用户状态的单页面应用程序非常有用。

例如，假设你有一个单页面应用程序，它允许用户查看不同的产品。你可以使用以下代码将当前产品的状态添加到历史记录中：

history.pushState({productId: 1}, 'Product 1', '/product/1');

然后，你可以使用以下代码替换当前状态：

history.replaceState({productId: 2}, 'Product 2', '/product/2');

当用户点击浏览器的后退按钮时，应用程序将加载产品 1 的状态，当用户点击前进按钮时，应用程序将加载产品 2 的状态。