在网页应用中，经常需要让用户可以返回到之前浏览过的页面。这需要对浏览器历史记录进行操作，而前端技术提供了一些方法来实现这个功能。
浏览器历史记录 API
浏览器提供了 history 对象来访问当前窗口的浏览器历史记录。这个对象包含了当前窗口访问历史中的所有页面信息，并且提供了一些方法来操作历史记录。
history.go()
go() 方法可以在历史记录中移动指定数量的步骤。例如：
-- ---- --------------- -- ---- --------------
这个方法只能在同一窗口中使用，不能打开新窗口或标签页。如果移动了太多步，超出了历史记录的范围，将不会产生任何效果。
history.back() 和 history.forward()
这两个方法可以分别后退和前进一步，等价于 history.go(-1) 和 history.go(1)。
history.pushState() 和 history.replaceState()
这两个方法可以修改当前历史记录中的当前页面信息，但不会导致页面跳转。
pushState() 方法可以添加一个新的历史记录项，以便用户可以通过浏览器的前进和后退按钮查看。
------------------- ----- - -- ----- --- -----------
上面的代码添加了一个新历史记录项，包含名为“Page 1”的标题和 URL 参数 ?page=1。该页面状态被保存到历史记录中，并且可以通过浏览器的前进和后退按钮访问。
replaceState() 方法可以修改当前历史记录项，而不是创建一个新的历史记录项。
---------------------- ----- - -- ----- --- -----------
这个代码修改了当前历史记录项的信息，仍然使用相同的 URL。这意味着用户不能通过浏览器的前进和后退按钮返回到之前的状态。但是，可以通过 JavaScript 调用 history.back() 或 history.go(-1) 返回到上一页。
实现回到上一页的功能
为了实现回到上一页的功能，可以使用 history.back() 方法。例如：
------- ------------------------------------
当用户点击这个按钮时，浏览器会后退一步。
如果要在代码中实现跳转到指定的历史记录项，可以使用 history.go() 方法。例如：
-- ---- ---------------
需要注意的是，由于历史记录是按时间排序的，因此无法直接根据 URL 跳转到特定的历史记录项。如果必须要实现这个功能，可以使用 pushState() 或 replaceState() 方法。
深入学习
浏览器历史记录 API 提供了更多丰富的功能，例如通过监听 popstate 事件来响应浏览器前进和后退按钮的点击。可以参考以下资源深入学习：
- MDN web docs: Manipulating the browser history
- CSS-Tricks: A Tale of Two Pops
- HTML5 Rocks: Introduction to the History API
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29290