可视化日志存储和回溯方法、装置和计算机设备与流程

[0001]
本申请涉及计算机技术领域，特别是涉及一种可视化日志存储和回溯方法、装置、计算机设备和存储介质。


背景技术：

[0002]
用户在网页上的操作过程，通常会以文本形式的日志记录下来，随着越来越多的可视化日志需求，需要把用户的操作界面及操作过程可视化保存并还原。
[0003]
传统技术中，通过html2canvas的方式，将页面用代码绘制的方式渲染成图片以实现截屏，通过运行javascript，将页面保存成图片并发送给后台。然而，该方法需进行大量的计算与递归调用，且日志以图片格式保存需占用大量的存储空间，导致性能与资源消耗大。


技术实现要素：

[0004]
基于此，有必要针对上述技术问题，提供一种能够减小性能与资源消耗的可视化日志存储和回溯方法、装置、计算机设备和存储介质。
[0005]
一种可视化日志存储方法，所述方法包括：
[0006]
在页面操作过程中，采集各当前页面对应的静态页面文本数据，各所述静态页面文本数据决定了对应的当前页面的内容、结构和样式；
[0007]
根据采集到各所述静态页面文本数据的时间，为各所述静态页面文本数据添加时间戳；
[0008]
将添加有时间戳的各所述静态页面文本数据进行存储。
[0009]
一种可视化日志存储装置，所述装置包括：
[0010]
采集模块，用于在页面操作过程中，采集各当前页面对应的静态页面文本数据，各所述静态页面文本数据决定了对应的当前页面的内容、结构和样式；
[0011]
添加模块，用于根据采集到各所述静态页面文本数据的时间，为各所述静态页面文本数据添加时间戳；
[0012]
存储模块，用于将添加有时间戳的各所述静态页面文本数据进行存储。
[0013]
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0014]
在页面操作过程中，采集各当前页面对应的静态页面文本数据，各所述静态页面文本数据决定了对应的当前页面的内容、结构和样式；
[0015]
根据采集到各所述静态页面文本数据的时间，为各所述静态页面文本数据添加时间戳；
[0016]
将添加有时间戳的各所述静态页面文本数据进行存储。
[0017]
一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
[0018]
在页面操作过程中，采集各当前页面对应的静态页面文本数据，各所述静态页面文本数据决定了对应的当前页面的内容、结构和样式；
[0019]
根据采集到各所述静态页面文本数据的时间，为各所述静态页面文本数据添加时间戳；
[0020]
将添加有时间戳的各所述静态页面文本数据进行存储。
[0021]
上述可视化日志存储方法、装置、计算机设备和存储介质，在页面操作过程中，采集并存储的是各页面的静态页面文本数据，静态页面文本数据决定了对应的页面的内容、结构和样式，能够以可视化方式将页面还原出来，将还原的页面按照静态页面文本数据的时间戳顺序进行展示，可以实现页面操作过程的可视化日志回溯。据此，利用文本格式的静态页面数据记录对应的页面操作日志，能够节省大量的存储空间，且将静态页面数据还原成页面的过程简单易行，无需复杂的计算与格式转换，从而减少性能和资源消耗。
[0022]
一种可视化日志回溯方法，所述方法包括：
[0023]
响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与所述待回溯页面操作过程中各页面对应的目标静态页面文本数据，各所述目标静态页面文本数据决定了对应页面的内容、结构和样式；
[0024]
根据所述目标静态页面文本数据的时间戳顺序，将各所述目标静态页面文本数据还原成页面，基于还原后的页面获得所述待回溯页面操作过程的可视化日志。
[0025]
一种可视化日志回溯装置，所述装置包括：
[0026]
获取模块，用于响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与所述待回溯页面操作过程中各页面对应的目标静态页面文本数据，各所述目标静态页面文本数据决定了对应页面的内容、结构和样式；
[0027]
还原模块，用于根据所述目标静态页面文本数据的时间戳顺序，将各所述目标静态页面文本数据还原成页面，基于还原后的页面获得所述待回溯页面操作过程的可视化日志。
[0028]
一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0029]
响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与所述待回溯页面操作过程中各页面对应的目标静态页面文本数据，各所述目标静态页面文本数据决定了对应页面的内容、结构和样式；
[0030]
根据所述目标静态页面文本数据的时间戳顺序，将各所述目标静态页面文本数据还原成页面，基于还原后的页面获得所述待回溯页面操作过程的可视化日志。
[0031]
一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
[0032]
响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与所述待回溯页面操作过程中各页面对应的目标静态页面文本数据，各所述目标静态页面文本数据决定了对应页面的内容、结构和样式；
[0033]
根据所述目标静态页面文本数据的时间戳顺序，将各所述目标静态页面文本数据还原成页面，基于还原后的页面获得所述待回溯页面操作过程的可视化日志。
[0034]
上述可视化日志回溯方法、装置、计算机设备和存储介质，在页面操作过程中，采集并存储的是各页面的静态页面文本数据，静态页面文本数据决定了对应的页面的内容、结构和样式，能够以可视化方式将页面还原出来，将还原的页面按照静态页面文本数据的时间戳顺序进行展示，可以实现页面操作过程的可视化日志回溯。据此，利用文本格式的静态页面数据记录对应的页面操作日志，能够节省大量的存储空间，且将静态页面数据还原成页面的过程简单易行，无需复杂的计算与格式转换，从而减少性能和资源消耗。
附图说明
[0035]
图1为一个实施例中可视化日志存储和回溯方法的应用环境图；
[0036]
图2为一个实施例中可视化日志存储方法的流程示意图；
[0037]
图3为一个实施例中可视化日志回溯方法的流程示意图；
[0038]
图4-图8为一个实施例中页面操作过程的回溯示意图；
[0039]
图9为一个实施例中可视化日志存储装置的结构框图；
[0040]
图10为一个实施例中可视化日志回溯装置的结构框图；
[0041]
图11为一个实施例中计算机设备的内部结构图；
[0042]
图12为一个实施例中计算机设备的内部结构图。
具体实施方式
[0043]
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
[0044]
本申请提供的可视化日志存储和回溯方法，可以应用于如图1所示的应用环境中。该应用环境涉及第一终端102、第二终端104和服务器106，其中，第一终端102和第二终端104均通过网络与服务器106进行通信。
[0045]
用户可以通过第一终端102访问业务平台，服务器106可以是该业务平台所在的服务器，用户进入到监控页面进行页面操作的过程中，第一终端102采集各页面对应的静态页面文本数据，并将采集的静态页面文本数据上传至服务器106，服务器106将静态页面文本数据进行保存，实现页面操作过程的可视化日志存储。
[0046]
业务人员可以通过第二终端104向服务器106发送针对待回溯页面操作过程的可视化日志回溯请求，服务器106将与待回溯页面操作过程中各页面对应的静态页面文本数据返回给第二终端104，第二终端104将接收到的静态页面文本数据还原成对应的页面，实现待回溯页面操作过程的可视化日志回溯。
[0047]
其中，第一终端102和第二终端104可以但不限于是各种个人计算机、笔记本电脑、智能手机和平板电脑，服务器106可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
[0048]
可以理解，本申请实施例中可视化日志存储方法可以由第一终端102来执行，也可以由服务器106来执行，还可以是由第一终端102和服务器106共同执行。本申请实施例中可视化日志回溯方法可以由第二终端104来执行，也可以由服务器106来执行，还可以是由第二终端104和服务器106共同执行。
[0049]
在一个实施例中，如图2所示，提供了一种可视化日志存储方法，以该方法应用于图1中的第一终端102为例进行说明，包括以下步骤s202至步骤s206。
[0050]
s202，在页面操作过程中，采集各当前页面对应的静态页面文本数据，各静态页面文本数据决定了对应的当前页面的内容、结构和样式。
[0051]
页面在操作过程中可能是动态变化的，但页面操作过程中的任意时刻的页面，都可认为是静态的，可以将页面理解为一个个的截图，页面会变化可以理解为各个截图之间的切换，因此，只需要保存各个时刻的静态页面就能还原出截图的效果，而无需关心页面的业务逻辑，这极大的提高了页面可视化日志存储和回溯的通用性与易用性。
[0052]
对于每一时刻的当前页面，终端可以采集该当前页面对应的静态页面文本数据，每一静态页面文本数据决定了对应页面的内容、结构和样式，从而每一静态页面文本数据可以唯一的还原一个页面。
[0053]
以软件工程中的一种软件架构模式，mvc模式(model-view-controller)为例来说明采集静态页面文本数据的原理，mvc模式下的软件系统分为三个基本部分：模型(model)、视图(view)和控制器(controller)，可以将view理解为页面，model为页面上的数据，controller为控制页面展示及刷新的逻辑，其中，view只取决于model，理论上任意时刻的页面都是静态的，controller只用来控制view的变化，去掉controller就是一个完全静态的页面，model和view数据相当于静态页面文本数据，因此将对应时刻的model和view数据保存下来，可以将其还原成页面，实现页面“截图”的效果，这里的“截图”指的是静态页面文本数据，同时通过静态页面文本数据还原的页面是整个完整的页面，比截屏只能截一部分的效果更好。举例来说，对于长页面，用户可在长页面进行上下滑动，滑动到不同位置时对应的当前屏幕页面也不同，通过截屏只可以截取当前屏幕页面，即只可以截取长页面中的一部分页面，通过静态页面文本数据则可以还原整个长页面，从而可以将用户在长页面中各个不同滑动位置对应的页面操作都完整还原出来。
[0054]
s204，根据采集到各静态页面文本数据的时间，为各静态页面文本数据添加时间戳。
[0055]
每一静态页面文本数据均添加时间戳，该时间戳具体可以是静态页面文本数据被采集到的时刻，举例来说，终端采集到一静态页面文本数据的时刻为2020年8月5日12时30分30秒100毫秒(用2020-08-05 12:30:30:100表示)，则为该静态页面文本数据添加的时间戳为2020-08-05 12:30:30:100。
[0056]
s206，将添加有时间戳的各静态页面文本数据进行存储。
[0057]
由于静态页面文本数据是文本格式的，终端可以直接通过网页日志(weblog)将采集到的静态页面文本数据上传给后台服务器进行保存。添加有时间戳的各静态页面文本数据在按照时间戳顺序被还原成对应的页面时，可实现页面操作过程的可视化日志回溯。静态页面文本数据的时间戳顺序可以作为还原后的页面的展示顺序，举例来说，若静态页面文本数据1的时间戳比静态页面文本数据2的时间戳早，可以理解为在页面操作过程中，静态页面文本数据1对应的页面比静态页面文本数据2对应的页面先出现，从而由静态页面文本数据1还原得到的页面比由静态页面文本数据2还原得到的页面先展示。
[0058]
需要说明的是，除了为采集到的每一静态页面文本数据添加时间戳，还可以进一步添加其它辅助信息，例如索引，用于验证存储的静态页面文本数据的完整性。具体而言，
索引可以是连续编号，按照采集到静态页面文本数据的时间顺序，依次为静态页面文本数据添加编号，若存储的静态页面文本数据的编号连续，说明数据存储完整，若存储的静态页面文本数据的编号不连续，说明存储过程中丢失了部分数据。
[0059]
上述可视化日志存储方法中，在页面操作过程中，采集并存储的是各页面的静态页面文本数据，静态页面文本数据决定了对应的页面的内容、结构和样式，能够以可视化方式将页面还原出来，将还原的页面按照静态页面文本数据的时间戳顺序进行展示，可以实现页面操作过程的可视化日志回溯。据此，利用文本格式的静态页面数据记录对应的页面操作日志，能够节省大量的存储空间，且将静态页面数据还原成页面的过程简单易行，无需复杂的计算与格式转换，从而减少性能和资源消耗。此外，存储的静态页面文本数据是编译后的数据，具有良好的兼容性，可以避免还原时不兼容的问题，精确性和通用性好，有利于降低开发成本。
[0060]
在一个实施例中，在采集到静态页面文本数据后，还可以包括以下步骤：检测各静态页面文本数据中是否包含敏感字段；当检测到静态页面文本数据中包含敏感字段时，对静态页面文本数据中包含的敏感字段进行脱敏处理。
[0061]
敏感字段可以是由监管规定的敏感字段，例如姓名、身份证号码、手机号码等。脱敏处理具体可以是将敏感字段进行隐藏，保护用户隐私信息，例如将手机号码中间四位用星号代替。需要说明的是，脱敏处理只影响具体信息的展示，不影响页面的还原，例如，页面操作过程中用户输入的手机号码为15912345678，则还原后的页面中该手机号码会被展示为159****5678，而还原后的页面中其它展示内容与原页面保持一致。
[0062]
本实施例中，由于采集的静态页面文本数据为文本格式，可以对其进行敏感字段的过滤等处理，从而实现更高的灵活性和安全性。
[0063]
在一个实施例中，页面为html页面，采集各当前页面对应的静态页面文本数据的步骤，具体可以是：采集各当前html页面对应的html数据和css数据，作为各当前页面对应的静态页面文本数据。
[0064]
以h5页面为例，h5页面主要由以下3个部分组成：html(超文本标记语言)、css(层叠样式表)和js(脚本语言)，去掉js就可以得到一个完全静态的页面，所以通过html与css可以还原出一个h5页面，其中，html决定了页面的内容和结构，css决定了页面的样式。具体而言，h5中有原生api(应用程序接口)可以直接获取到html与css，不需要用户操作与授权，对用户操作无任何影响，用户无感知。需要说明的是，css也可以不通过终端采集，html会不断变化，但是css不会变，所以css可以直接由源代码生成。
[0065]
本实施例中，html与css是构成页面的源代码，所以日志保存的都是纯文本的数据，相比保存截图或视频，可以节约大量的存储空间，文本的压缩率也比图片或视频更大更快，由于html与css可以唯一的还原一个页面，从而可以实现完美还原，避免各种模拟还原导致的偏差。
[0066]
在一个实施例中，页面为小程序页面，采集各当前页面对应的静态页面文本数据的步骤，具体可以是：采集各当前小程序页面对应的data数据，作为各当前页面对应的静态页面文本数据。
[0067]
小程序的页面结构与h5本质上相同，但由于小程序的限制，没法直接获取到小程序页面的dom结构。本实施例中，采集的是小程序页面的data数据，因为小程序页面的数据
都保存在data中，小程序页面的内容由data唯一决定，且data可以决定小程序页面的展现，所以通过data可以还原出一个小程序页面。
[0068]
在一个实施例中，在页面操作过程中，还可以包括以下步骤：监听是否有页面跳转动作；当监听到页面跳转动作时，记录页面跳转变化。
[0069]
页面跳转动作表示从一个页面跳转到另一个页面的动作，举例来说，对于一个搜索页面，用户可以在该搜索页面的搜索框中输入想要查询的信息，当用户输入完毕并点击搜索时，页面会跳转到相应的搜索结果页面，此时认为监听到页面跳转动作。当监听到页面跳转动作时，记录页面跳转变化，具体可以是生成一跳转标识，用于标记页面跳转变化。
[0070]
对于上述搜索页面来说，可认为其包含固定元素和可操作元素，固定元素表示在页面操作过程中保持不变的元素，可操作元素表示根据用户操作会发生变化的元素，例如输入框的内容，在不同的时刻会由于用户输入数据的不同而发生变化。
[0071]
在一个实施例中，将添加有时间戳的各静态页面文本数据进行存储的步骤，具体可以包括以下步骤：根据页面跳转变化，对添加有时间戳的各静态页面文本数据进行分组，每一组静态页面文本数据对应同一页面；对于每一组静态页面文本数据，通过以下步骤进行存储：将其中时间戳最早的静态页面文本数据作为初始数据，将其余的各静态页面文本数据分别与初始数据进行对比，获得其余的各静态页面文本数据相对于初始数据的增量数据；将初始数据与各增量数据进行关联存储。
[0072]
在另一个实施例中，对于每一组静态页面文本数据，通过以下步骤进行存储：将其中时间戳最早的静态页面文本数据作为初始数据，将其余的各静态页面文本数据分别与时间戳排在各自前面的第一个静态页面文本数据进行对比，获得其余的各静态页面文本数据相对于时间戳排在各自前面的第一个静态页面文本数据的增量数据，将初始数据与各增量数据进行关联存储。
[0073]
根据页面跳转变化，对添加有时间戳的各静态页面文本数据进行分组，可以是将两次页面跳转变化之间采集的静态页面文本数据作为一组。具体地，当用户进入到监控页面时，记录一次页面跳转变化，并开始实时采集各当前页面对应的静态页面文本数据，为采集的各静态页面文本数据添加同一关联标识，直至监测到下一次页面跳转变化。
[0074]
具有同一关联标识的静态页面文本数据属于同一组静态页面文本数据，对于同一组静态页面文本数据，由于对应的页面变化相对较小，可以采用增量存储方式进行存储，以减小需占用的存储空间。具体地，第一种增量存储方式可以是将监测到页面跳转变化后采集的第一个静态页面文本数据作为初始数据，存储该初始数据，后续每采集到一个静态页面文本数据，计算该静态页面文本数据相对于第一个静态页面文本数据的增量数据，存储该增量数据，直至监测到下次页面跳转变化，再重复上述步骤。可以理解，每一初始数据与对应的各增量数据具有同一关联标识，以实现关联存储。通过这种增量存储方式，可以减小存储数据出错时对还原产生的影响，例如，某一增量数据存储出错时，只会影响该增量数据的还原，而不会影响后续增量数据的还原。
[0075]
第二种增量存储方式可以是将监测到页面跳转变化后采集的第一个静态页面文本数据作为初始数据，存储该初始数据，后续每采集到一个静态页面文本数据，计算该静态页面文本数据相对于时间戳排在该静态页面文本数据前面的第一个静态页面文本数据的增量数据，存储该增量数据，直至监测到下次页面跳转变化，再重复上述步骤。通过这种增
量存储方式，可以进一步减少相同数据的重复存储，从而进一步减小需占用的存储空间。
[0076]
举例来说，从监听到进入搜索页面到监听到进入搜索结果页面这一时间段内采集的各静态页面文本数据均对应搜索页面，假设该时间段内采集的各静态页面文本数据有3个，按照时间戳从先往后的顺序分别为数据a、数据b和数据c，则可以将数据a作为初始数据，计算数据b相对于数据a的增量数据，用数据b-a表示，计算数据c相对于数据a的增量数据，用数据c-a表示，存储数据a、数据b-a以及数据c-a。或者，将数据a作为初始数据，计算数据b相对于数据a的增量数据，用数据b-a表示，计算数据c相对于数据b的增量数据，用数据c-b表示，存储数据a、数据b-a以及数据c-a。
[0077]
例如，数据a对应的搜索页面的输入框内容为123，数据b对应的搜索页面的输入框内容为12345，数据c对应的搜索页面的输入框内容为1234567，除此之外，数据a、b、c对应的搜索页面中的其它内容完全相同，则数据b-a为“45”，数据c-a为“4567”，数据c-b为“67”，对该时间段内采集的各静态页面文本数据进行存储时，可以存储数据a、“45”以及“4567”，也可以存储数据a、“45”以及“67”。
[0078]
上述实施例中，对于同一页面对应的不同静态页面文本数据，通过对其初始页面状态对应的初始数据及其后续各页面状态对应的增量数据进行关联存储，可以避免对相同数据进行重复存储，从而进一步减小存储空间的占用。
[0079]
在一个实施例中，如图3所示，提供了一种可视化日志回溯方法，以该方法应用于图1中的第二终端104为例进行说明，包括以下步骤s302至步骤s304。
[0080]
s302，响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与待回溯页面操作过程中各页面对应的目标静态页面文本数据，各目标静态页面文本数据决定了对应页面的内容、结构和样式。
[0081]
待回溯页面操作过程中的各页面对应的静态页面文本数据，可以通过前文实施例的存储方法保存下来，例如存储于后台服务器中。具体地，页面操作过程可以从用户进入监控页面开始，到用户离开监控页面结束，该过程中可以采集多个时刻的静态页面文本数据，从而每一页面操作过程可以关联多组静态页面文本数据，每组静态页面文本数据对应一个时刻的页面。与待回溯页面操作过程中各页面对应的目标静态页面文本数据，表示待回溯页面操作过程关联的静态页面文本数据。
[0082]
s304，根据目标静态页面文本数据的时间戳顺序，将各目标静态页面文本数据还原成页面，基于还原后的页面获得待回溯页面操作过程的可视化日志。
[0083]
目标静态页面文本数据的时间戳顺序可以作为还原后的页面的展示顺序，将各目标静态页面文本数据还原得到的各页面，按照时间戳顺序依次展示，可以将待回溯页面操作过程进行可视化还原。
[0084]
如图4-8所示，提供了一个实施例中页面操作过程的回溯示意图。该页面操作过程具体为用户在获取车险报价页面的操作过程，用户进入该页面后，通过输入车牌、手机号、验证码信息，获取相应的报价信息。对该页面操作过程进行存储时，采集各当前页面对应的静态页面文本数据，各当前页面(分别用页面1-5表示)按时间先后顺序依次如图4-8所示，页面1-5对应的静态页面文本数据(分别用数据1-5表示)包含页面的内容、结构和样式信息，可对数据1-5进行还原得到原页面1-5，根据采集时间为数据1-5添加时间戳，存储添加有时间戳的数据1-5。对该页面操作过程进行回溯时，从已存储数据中获取该页面操作过程
对应的目标静态页面文本数据(即数据1-5)，分别将数据1-5还原成相应的页面，即页面1-5，根据数据1-5的时间戳顺序，依次展示还原出的页面1-5，如图4-8所示，从而实现对页面操作过程的可视化还原。
[0085]
上述可视化日志回溯方法中，在页面操作过程中，采集并存储的是各页面的静态页面文本数据，静态页面文本数据决定了对应的页面的内容、结构和样式，能够以可视化方式将页面还原出来，将还原的页面按照静态页面文本数据的时间戳顺序进行展示，可以实现页面操作过程的可视化日志回溯。据此，利用文本格式的静态页面数据记录对应的页面操作日志，能够节省大量的存储空间，且将静态页面数据还原成页面的过程简单易行，无需复杂的计算与格式转换，从而减少性能和资源消耗。此外，存储的静态页面文本数据是编译后的数据，具有良好的兼容性，可以避免还原时不兼容的问题，精确性和通用性好，有利于降低开发成本。
[0086]
在一个实施例中，在获取到目标静态页面文本数据后，还可以包括以下步骤：检测各目标静态页面文本数据中是否包含敏感字段；当检测到目标静态页面文本数据中包含敏感字段时，对目标静态页面文本数据中包含的敏感字段进行脱敏处理。
[0087]
敏感字段可以是由监管规定的敏感字段，例如姓名、身份证号码、手机号码等。脱敏处理具体可以是将敏感字段进行隐藏，保护用户隐私信息，例如将手机号码中间四位用星号代替。需要说明的是，脱敏处理只影响具体信息的展示，不影响页面的还原，例如，页面操作过程中用户输入的手机号码为15912345678，则还原后的页面中该手机号码会被展示为159****5678，而还原后的页面中其它展示内容与原页面保持一致。
[0088]
本实施例中，由于采集的静态页面文本数据为文本格式，可以对其进行敏感字段的过滤等处理，从而实现更高的灵活性和安全性。
[0089]
在一个实施例中，页面为html页面，对应的目标静态页面文本数据包括html数据和css数据。根据目标静态页面文本数据的时间戳顺序，将各目标静态页面文本数据还原成页面，获得待回溯页面操作过程的可视化日志的步骤，具体可以包括以下步骤：对于任一目标静态页面文本数据，通过浏览器将html数据和css数据渲染成页面；根据目标静态页面文本数据的时间戳顺序，依次展示渲染得到的页面，获得待回溯页面操作过程的可视化日志。
[0090]
举例来说，待回溯页面操作过程关联的目标静态页面文本数据有10组，每组目标静态页面文本数据包含对应页面的html数据和css数据，该10组目标静态页面文本数据按照时间戳先后顺序分别为目标静态页面文本数据1、目标静态页面文本数据2、
…
、目标静态页面文本数据10，相应的通过浏览器渲染得到的页面分别为页面1、页面2、
…
、页面10，依次展示页面1、页面2、
…
、页面10，可实现视频播放待回溯页面操作过程的效果。
[0091]
本实施例中，通过浏览器将html数据和css数据渲染成页面，可以实现页面的完美还原，避免各种模拟还原导致的偏差。
[0092]
在一个实施例中，页面为小程序页面，对应的目标静态页面文本数据包括data数据。根据目标静态页面文本数据的时间戳顺序，将各目标静态页面文本数据还原成页面，获得待回溯页面操作过程的可视化日志的步骤，具体可以包括以下步骤：对于任一目标静态页面文本数据，通过小程序模拟器生成对应的页面，将data数据绑定到生成的页面；根据目标静态页面文本数据的时间戳顺序，依次展示绑定后的页面，获得待回溯页面操作过程的可视化日志。
[0093]
小程序模拟器具体是小程序官方的小程序开发工具，因为小程序对于开发者访问wxml(相当于h5的html)与wxss(相当于h5的css)有限制，无法通过api动态获取wxml和wxss，因此需要依赖小程序的源代码来实现还原，小程序的源代码中包含了wxml与wxss，data数据可以唯一的决定wxml与wxss的展现。
[0094]
本实施例中，通过小程序模拟器生成对应的页面，使用该生成的页面的wxml与wxss，将data数据绑定到该生成的页面，即可实现小程序页面的完美还原。
[0095]
在一个实施例中，对于任一目标静态页面文本数据，通过小程序模拟器生成对应的页面的步骤，具体可以包括以下步骤：对于任一目标静态页面文本数据，获取目标静态页面文本数据关联的小程序版本信息以及页面位置路径；基于小程序版本信息以及页面位置路径，通过小程序模拟器生成对应的页面。
[0096]
本实施例中，小程序版本信息以及页面位置路径会在日志中记录，小程序版本信息具体可以是小程序版本号，还原时将本地代码切换到对应的小程序版本，通过小程序模拟器跳转到页面位置路径对应的页面，然后将data数据绑定到该页面，可以实现小程序页面的完美还原。
[0097]
在一个实施例中，在获取与待回溯页面操作过程中各页面对应的目标静态页面文本数据之后，还可以包括以下步骤：检测目标静态页面文本数据中是否存在相互关联的目标静态页面文本数据。
[0098]
相互关联的目标静态页面文本数据表示存储时进行了关联存储的数据，具体可以是添加有相同关联标识的数据。如前所述，相互关联的目标静态页面文本数据可以包括对应同一页面的初始页面状态的静态页面文本数据，以及后续各页面状态的静态页面文本数据相对于初始页面状态或者前一页面状态的静态页面文本数据的增量数据。
[0099]
在一个实施例中，根据目标静态页面文本数据的时间戳顺序，将各目标静态页面文本数据还原成页面的步骤，具体可以包括以下步骤：若检测到相互关联的目标静态页面文本数据，对于每一组相互关联的目标静态页面文本数据，通过以下步骤进行还原：将其中时间戳最早的目标静态页面文本数据作为初始待还原数据，将其余的各目标静态页面文本数据分别与初始待还原数据进行合并，获得相应的各后续待还原数据；根据初始待还原数据以及各后续待还原数据的时间戳顺序，将初始待还原数据以及各后续待还原数据分别还原成相应的页面。
[0100]
在另一个实施例中，对于每一组相互关联的目标静态页面文本数据，通过以下步骤进行还原：将其中时间戳最早的目标静态页面文本数据作为初始待还原数据，将其余的各目标静态页面文本数据分别与时间戳排在各自前面的所有目标静态页面文本数据进行合并，获得相应的各后续待还原数据；根据初始待还原数据以及各后续待还原数据的时间戳顺序，将初始待还原数据以及各后续待还原数据分别还原成相应的页面。
[0101]
如前所述，每一组静态页面文本数据进行关联存储时，其中时间戳最早的静态页面文本数据为存储的初始数据，即时间戳最早的目标静态页面文本数据，也即初始待还原数据，存储的增量数据即为其余的目标静态页面文本数据。
[0102]
若按照前文实施例的第一种增量存储方式存储，则按照以下方式进行还原：将其余的各目标静态页面文本数据分别与初始待还原数据进行合并，获得相应的各后续待还原数据，根据初始待还原数据以及各后续待还原数据的时间戳先后顺序，依次将初始待还原
数据以及各后续待还原数据还原成相应的页面。举例来说，若一组相互关联的目标静态页面文本数据包含3个数据，按照时间戳从先往后的顺序分别为数据a、数据b和数据c，则将数据a作为初始待还原数据，将数据b与数据a进行合并，获得的后续待还原数据用数据a+b表示，将数据c与数据a进行合并，获得的后续待还原数据用数据a+c表示。对该组相互关联的目标静态页面文本数据进行还原时，依次将数据a、数据a+b和数据a+c还原成相应的页面。
[0103]
若按照前文实施例的第二种增量存储方式存储，则按照以下方式进行还原：将其余的各目标静态页面文本数据分别与该组中时间戳排在各自前面的所有目标静态页面文本数据进行合并，获得相应的各后续待还原数据，根据初始待还原数据以及各后续待还原数据的时间戳先后顺序，依次将初始待还原数据以及各后续待还原数据还原成相应的页面。举例来说，若一组相互关联的目标静态页面文本数据包含3个数据，按照时间戳从先往后的顺序分别为数据a、数据b和数据c，则将数据a作为初始待还原数据，将数据b与数据a进行合并，获得的后续待还原数据用数据a+b表示，将数据c与数据a、b进行合并，获得的后续待还原数据用数据a+b+c表示。对该组相互关联的目标静态页面文本数据进行还原时，依次将数据a、数据a+b和数据a+b+c还原成相应的页面。
[0104]
需要说明的是，上述实施例以h5页面和小程序页面为例对本方案进行了描述，但本方案的适用范围不限于这两种形式，其它例如app、pc应用、游戏等各种前端形式，只要采用了相似的架构设计，利用了静态页面的特性，都可以采用本方案来进行页面的可视化日志存储与回溯。
[0105]
应该理解的是，虽然图2-3的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图2-3中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
[0106]
在一个实施例中，如图9所示，提供了一种可视化日志存储装置900，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：采集模块910、添加模块920和存储模块930，其中：
[0107]
采集模块910，用于在页面操作过程中，采集各当前页面对应的静态页面文本数据，各静态页面文本数据决定了对应的当前页面的内容、结构和样式。
[0108]
添加模块920，用于根据采集到各静态页面文本数据的时间，为各静态页面文本数据添加时间戳。
[0109]
存储模块930，用于将添加有时间戳的各静态页面文本数据进行存储。
[0110]
在一个实施例中，该装置900还包括处理模块，用于检测各静态页面文本数据中是否包含敏感字段，当检测到静态页面文本数据中包含敏感字段时，对静态页面文本数据中包含的敏感字段进行脱敏处理。
[0111]
在一个实施例中，页面为html页面，采集模块910具体用于采集各当前html页面对应的html数据和css数据，作为各当前页面对应的静态页面文本数据。
[0112]
在一个实施例中，页面为小程序页面，采集模块910具体用于采集各当前小程序页面对应的data数据，作为各当前页面对应的静态页面文本数据。
[0113]
在一个实施例中，该装置还包括监听模块，用于在页面操作过程中，监听是否有页面跳转动作，当监听到页面跳转动作时，记录页面跳转变化。
[0114]
在一个实施例中，存储模块930具体用于：根据页面跳转变化，对添加有时间戳的各静态页面文本数据进行分组；对于每一组静态页面文本数据，通过以下步骤进行存储：将其中时间戳最早的静态页面文本数据作为初始数据，将其余的各静态页面文本数据分别与初始数据进行对比，获得其余的各静态页面文本数据相对于初始数据的增量数据；将初始数据与各增量数据进行关联存储。
[0115]
在一个实施例中，存储模块930具体用于：根据页面跳转变化，对添加有时间戳的各静态页面文本数据进行分组；对于每一组静态页面文本数据，通过以下步骤进行存储：将其中时间戳最早的静态页面文本数据作为初始数据，将其余的各静态页面文本数据分别与时间戳排在各自前面的第一个静态页面文本数据进行对比，获得其余的各静态页面文本数据相对于时间戳排在各自前面的第一个静态页面文本数据的增量数据；将初始数据与各增量数据进行关联存储。
[0116]
关于可视化日志存储装置的具体限定可以参见上文中对于可视化日志存储方法的限定，在此不再赘述。上述可视化日志存储装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
[0117]
在一个实施例中，如图10所示，提供了一种可视化日志回溯装置1000，该装置可以采用软件模块或硬件模块，或者是二者的结合成为计算机设备的一部分，该装置具体包括：获取模块1010和还原模块1020，其中：
[0118]
获取模块1010，用于响应于针对待回溯页面操作过程的可视化日志回溯请求，从已存储的添加有时间戳的静态页面文本数据中，获取与待回溯页面操作过程中各页面对应的目标静态页面文本数据，各目标静态页面文本数据决定了对应页面的内容、结构和样式。
[0119]
还原模块1020，用于根据目标静态页面文本数据的时间戳顺序，将各目标静态页面文本数据还原成页面，基于还原后的页面获得待回溯页面操作过程的可视化日志。
[0120]
在一个实施例中，该装置1000还包括处理模块，用于检测各目标静态页面文本数据中是否包含敏感字段，当检测到目标静态页面文本数据中包含敏感字段时，对目标静态页面文本数据中包含的敏感字段进行脱敏处理。
[0121]
在一个实施例中，页面为html页面，对应的目标静态页面文本数据包括html数据和css数据。还原模块1020具体用于：对于任一目标静态页面文本数据，通过浏览器将html数据和css数据渲染成页面；根据目标静态页面文本数据的时间戳顺序，依次展示渲染得到的页面，获得待回溯页面操作过程的可视化日志。
[0122]
在一个实施例中，页面为小程序页面，对应的目标静态页面文本数据包括data数据。还原模块1020具体用于：对于任一目标静态页面文本数据，通过小程序模拟器生成对应的页面，将data数据绑定到生成的页面；根据目标静态页面文本数据的时间戳顺序，依次展示绑定后的页面，获得待回溯页面操作过程的可视化日志。
[0123]
在一个实施例中，还原模块1020还用于：对于任一目标静态页面文本数据，获取目标静态页面文本数据关联的小程序版本信息以及页面位置路径；基于小程序版本信息以及
页面位置路径，通过小程序模拟器生成对应的页面。
[0124]
在一个实施例中，该装置还包括检测模块，用于检测目标静态页面文本数据中是否存在相互关联的目标静态页面文本数据。
[0125]
在一个实施例中，还原模块1020具体用于：若检测到相互关联的目标静态页面文本数据，对于每一组相互关联的目标静态页面文本数据，通过以下步骤进行还原：将其中时间戳最早的目标静态页面文本数据作为初始待还原数据，将其余的各目标静态页面文本数据分别与初始待还原数据进行合并，获得相应的各后续待还原数据；根据初始待还原数据以及各后续待还原数据的时间戳顺序，将初始待还原数据以及各后续待还原数据分别还原成相应的页面。
[0126]
在一个实施例中，还原模块1020具体用于：若检测到相互关联的目标静态页面文本数据，对于每一组相互关联的目标静态页面文本数据，通过以下步骤进行还原：将其中时间戳最早的目标静态页面文本数据作为初始待还原数据，将其余的各目标静态页面文本数据分别与时间戳排在各自前面的所有目标静态页面文本数据进行合并，获得相应的各后续待还原数据；根据初始待还原数据以及各后续待还原数据的时间戳顺序，将初始待还原数据以及各后续待还原数据分别还原成相应的页面。
[0127]
关于可视化日志回溯装置的具体限定可以参见上文中对于可视化日志回溯方法的限定，在此不再赘述。上述可视化日志回溯装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
[0128]
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器和网络接口。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储静态页面文本数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种可视化日志存储方法和/或一种可视化日志回溯方法。
[0129]
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图12所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过wifi、运营商网络、nfc(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种可视化日志存储方法和/或一种可视化日志回溯方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
[0130]
本领域技术人员可以理解，图11或图12中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
[0131]
在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
[0132]
在一个实施例中，提供了一种计算机可读存储介质，存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
[0133]
在一个实施例中，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述各方法实施例中的步骤。
[0134]
需要理解的是，上述实施例中的术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。
[0135]
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-only memory，rom)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(random access memory，ram)或外部高速缓冲存储器。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器(static random access memory，sram)或动态随机存取存储器(dynamic random access memory，dram)等。
[0136]
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
[0137]
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。