在单页应用程序中，我们通常使用 history.pushstate 和 popstate 来管理页面状态和 URL。但是当用户单击浏览器的后退按钮时，页面不会重新加载，因此我们需要确保该操作会正确地更新页面状态。
使用 popstate 监听后退按钮事件
popstate 事件会在通过前进或后退按钮导航浏览历史记录时触发。我们可以使用 window.addEventListener() 方法来监听该事件：
----------------------------------- --------------- - -- --------- ---
在事件处理程序中，我们可以获取 event.state 属性，该属性包含在调用 history.pushstate() 时传递给它的对象。这样，我们就可以根据 state 对象来更新页面状态。
例如，假设我们有一个包含“主页”和“关于”两个按钮的网站。单击这些按钮会调用以下代码之一：
------------------- ----- ------ -- ----- ----- ------------------- ----- ------- -- ----- ----------
然后，我们可以使用以下代码来更新页面状态：
----------------------------------- --------------- -
-- ------------- -
-----------------------------
-
---
-------- ---------------- -
-- ------------
-触发后退按钮事件
当用户单击浏览器的后退按钮时，popstate 事件会触发，但如果我们想在页面上的某个元素上单击时触发后退按钮，则需要手动触发该事件。我们可以使用 history.back() 方法来模拟用户单击浏览器的后退按钮：
---------------------------------------------------------------- --------------- - --------------- ---
这样，当用户单击“后退”按钮时，popstate 事件会触发，并且我们的事件处理程序将正确更新页面状态。
结论
通过监听 popstate 事件并使用 state 对象更新页面状态，我们可以确保在单页应用程序中使用浏览器后退按钮时正确地更新页面状态。同时，使用历史记录 API 的 pushstate 和 popstate 方法以及手动触发 history.back() 方法可以帮助我们管理应用程序状态。
示例代码：（可以在 CodePen 上查看）
--------- -----
------
------
--------- ----------------- - -------- -------------
--------
-------- ---------------- -
--- ------- - -----------------------------------
-- ----- --- ------- -
----------------- - -------------------
- ---- -- ----- --- -------- -
----------------- - ----------------------------------
-
-
----------------------------------- --------------- -
-- ------------- -
-----------------------------
-
---
---------------------------------------------------------------- --------------- -
------------------- ----- ------ -- ----- -----
-------------------
---
----------------------------------------------------------------- --------------- -
------------------- ----- ------- -- ----- ----------
--------------------
---
---------------------------------------------------------------- --------------- -
---------------
---
---------
-------
------
-----
------- ----------------------------
------- -----------------------------
------
------
---- -------------
----------------
------
------- ----------------------------
-------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27454