简介
input-recorder 是一个基于 JavaScript 的 npm 包，可以用来记录用户在页面上的输入行为（比如输入文本，选择下拉框，点击按钮等），并将记录上传到远程服务器或本地存储。它可以用于多种场景下，比如测试用例的录制、用户行为分析、商业分析等。
安装
你可以通过 npm 安装 input-recorder 这个包，方法如下:
npm install input-recorder --save
使用
初始化
在使用 input-recorder 前，需要先引入并初始化它。
import InputRecorder from 'input-recorder' const recorder = new InputRecorder()
记录用户行为
input-recorder 可以监听页面上的用户行为，比如鼠标点击、键盘输入、表单提交等。下面是一个记录用户点击 a 标签的例子：
document.querySelector('a').addEventListener('click', () => {
recorder.record('click', {
target: 'a',
timestamp: Date.now()
})
})上面代码中，我们监听了页面上的 a 标签的点击事件，当用户点击时，通过 record() 方法记录了行为类型 "click"，以及一些其它信息，比如 DOM 元素、时间戳等。
input-recorder 的 record() 方法还支持许多其它事件类型，比如 "input"、"change"、"submit"、"scroll" 等，请查阅官方文档获取更多信息。
保存记录
完成记录后，我们需要保存这些记录。我们可以把它们上传到远程服务器或者保存到本地存储。下面是一个将记录保存到本地存储的例子：
window.addEventListener('unload', () => {
const records = recorder.getRecords()
localStorage.setItem('input-recorder-records', JSON.stringify(records))
})上面代码中，我们在页面卸载前，将用户行为记录通过 localStorage 保存到了本地存储。
回放记录
保存了用户行为记录后，我们可以通过 input-recorder 提供的 replay() 方法来重放这些记录。下面是一个基本的回放例子：
const records = JSON.parse(localStorage.getItem('input-recorder-records') || '[]')
recorder.replay(records)上面代码中，我们读取了之前保存的行为记录，然后通过 replay() 方法进行重放。
示例代码
下面是一个演示示例，它在用户点击时记录行为信息，并在页面卸载前将记录保存到本地存储。当用户重新打开页面并触发 "Replay" 按钮时，会重放之前的记录。
HTML：
<a href="#">Click me</a> <button id="replay-btn">Replay</button>
JS：
-- -------------------- ---- -------
------ ------------- ---- ----------------
-- --- --------------
----- -------- - --- ---------------
-- --------
----------------------------------------------------- -- -- -
------------------------ -
------- ----
---------- ----------
--
--
-- --------
--------------------------------- -- -- -
----- ------- - ---------------------
---------------------------------------------- ------------------------
--
-- -----------
--------------------------------------------------------------- -- -- -
----- ------- - --------------------------------------------------------- -- -----
------------------------
--总结
input-recorder 是一个非常有用的前端工具，可以用来方便地记录和回放用户行为记录。它的使用非常简单，只需要在需要记录的事件上调用 record() 方法即可。此外，它还提供了许多高级功能（比如定时器、节流器）以及可自定义的配置项。如果你需要更详细的文档或示例，请访问官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d381e8991b448df157