简介
blear.classes.history是一个在浏览器中使用的页面历史记录管理器。它基于history API，使得在网页中前进和后退无需使用浏览器的前进和后退按键。同时，它支持管理所有浏览器历史记录，可用于构建前端单页面应用。
安装
使用npm进行安装：
npm install blear.classes.history --save
使用
首先需要在html中引入blear.classes.history.js：
<script src="path/to/blear.classes.history.js"></script>
然后，通过以下代码创建一个blear.classes.history实例：
let historyManager = new blear.classes.history();
可以通过以下三个方法来管理历史记录：
1. pushState(state, title, url)
用于向浏览器历史记录栈添加一条新记录。
state：Object类型，需要存储到历史记录中的对象title：String类型，代表添加到历史记录的网页的标题url：String类型，代表添加到历史记录的网页的URL
示例代码：
historyManager.pushState({page: 'home'}, 'Home', '/home');2. replaceState(state, title, url)
用于在浏览器历史记录栈中替换最新的记录。
state：Object类型，需要存储到历史记录中的对象title：String类型，代表添加到历史记录的网页的标题url：String类型，代表添加到历史记录的网页的URL
示例代码：
historyManager.replaceState({page: 'home'}, 'Home', '/home');3. back()
用于回退到上一条历史记录。
示例代码：
historyManager.back();
深入
在一些特定场景下，我们需要对历史记录进行管理，如在单页面应用中，需要在进入新的页面前将页面信息存储在历史记录中，方便用户后退回到之前的页面。此时可以结合blear.classes.history和其它已有API来实现我们的需求。
示例代码：
-- -------------------- ---- -------
--- -------------- - --- ------------------------
--- --- - -------------------------------
------------------------------ -- -
--- ----- - --------------------------
------------- - -----------
---
--- ------------- - -----------------------------------------
--------------------- - -- -- -
--- ---- - -----------------------------------------
------------------------------- -------
------------- - -----
--
--- ---------- - --------------------------------------
------------------ - -- -- ----------------------在这段代码中，我们绑定了popstate事件，用以监听back()和前进按键的触发。每次popstate后，我们获取当前状态中的page信息，并在页面上展示相应内容。同时，我们在新建页面时，使用pushState将当前页面的信息存储至历史记录中。在返回时，使用back方法就能回退到之前的页面。
结语
blear.classes.history是一个非常实用的浏览器历史记录管理器，在前端开发中有着广泛的应用。掌握它的使用，能够更好地提升页面用户体验，同时减少前端开发的时间成本。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d4a