推荐答案
-- -------------------- ---- ------- -- -------- --------------- -- -------- ------------------ -- ------------- --------------- -- ---- -------------- -- ---- -------------- -- ------ -- -------- ------------------- ----- - -- ------ --- ----------- -- -------- ---------------------- ----- - -- ------ --- ----------- -- -- -------- -- ----------------------------------- --------------- - ---------------------- - - ----------------- - -- ------ - - ----------------------------- ---
本题详细解读
history 对象概述
history 对象是 JavaScript 中用于操作浏览器历史记录的对象。它允许你在不重新加载页面的情况下，操作浏览器的历史记录栈。history 对象提供了多种方法来导航历史记录，并且可以通过 pushState 和 replaceState 方法来添加或修改历史记录。
history.back()
history.back() 方法用于导航到浏览器历史记录中的上一个页面。它相当于用户点击浏览器的“后退”按钮。
history.forward()
history.forward() 方法用于导航到浏览器历史记录中的下一个页面。它相当于用户点击浏览器的“前进”按钮。
history.go()
history.go() 方法允许你跳转到历史记录中的特定页面。参数可以是正数、负数或零：
history.go(-1)：后退一页。history.go(1)：前进一页。history.go(0)：刷新当前页面。
history.pushState()
history.pushState() 方法用于向浏览器历史记录中添加一个新的状态。它接受三个参数：
state：一个 JavaScript 对象，表示与新历史记录条目关联的状态。title：新历史记录条目的标题（目前大多数浏览器忽略此参数）。url：新历史记录条目的 URL（可选）。
history.pushState({ page: 1 }, "title 1", "?page=1");history.replaceState()
history.replaceState() 方法与 pushState 类似，但它不会创建新的历史记录条目，而是替换当前的历史记录条目。
history.replaceState({ page: 2 }, "title 2", "?page=2");popstate 事件
popstate 事件在用户导航历史记录时触发，例如点击浏览器的“后退”或“前进”按钮。你可以通过监听这个事件来处理历史记录的变化。
window.addEventListener('popstate', function(event) {
console.log('Location: ' + document.location + ', state: ' + JSON.stringify(event.state));
});注意事项
pushState和replaceState方法不会触发页面的重新加载，它们只会修改浏览器的历史记录。popstate事件仅在用户通过浏览器按钮或history.back()、history.forward()等方法导航时触发，直接调用pushState或replaceState不会触发该事件。