使用 HTML5 File API 实现客户端 log（4）
|
- UID
- 1066743
|
使用 HTML5 File API 实现客户端 log（4）
收集客户端 log在浏览器中通过 HTML5 File API 操作文件时，所有的 log 信息都是存在客户端的机器上。 通过 HTML5 File API 创建的目录以及文件都是由浏览器进行管理的，用户很难在磁盘中的某个位置找到这些 log 文件。 所以有必要实现 log 文件下载功能，更方便地提供用户通过浏览器直接收集 log 文件。
在提供 log 下载的 code 中，本文将使用 HTML5 File API 异步版本，基于 Dojo 实现简单的 UI，通过 DirectoryEntry 类提供的方法遍历 html5logs 文件夹，遍历出里面的所有文件，按照日期排序，出输到页面中，并提供下载功能，用户可以单击下载链接，将 log 文件下载的磁盘中的某个位置。
清单 9. 获取 html5logs 文件夹下所有文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| _readEntries:function(){
var dirReader = this.html5logFolder.createReader();
var entries = [],self = this;
var readFiles = function() {
dirReader.readEntries(function(results) {// 读取目录内容，直到返回内容为 0
if (!results.length) {
entries.sort(function(a, b) {
return a.name < b.name ? -1 :b.name < a.name ? 1 : 0;
});
self._listResults(entries);
} else {
entries = entries.concat(Array.prototype.slice.call(results||[],0));
readFiles();
}
});
};
readFiles();
}
|
这里主要使用了 DirectoryEntry 类的 readEntries 方法，递归获取 html5logs 文件夹下的所有 log 文件，并根据文件名排序，随后调用 _listResults 方法，输出结果到 UI。具体的实现参考附件中的源码。
测试 HTML5 客户端 log 实现首先，需要创建一个 html5.Log 类的实例。这里需要注意的是，由于程序要请求 PERSISTENT（永久）类型的磁盘空间来存储文件， 而浏览器发现程序请求使用 PERSISTENT（永久）类型的空间时，需要征求用户的同意。在用户同意以后，才能授权使用 PERSISTENT（永久）类型的磁盘空间。 所以创建 html5.Log 的代码需要放在 requestQuota 方法的回调函数中。
图 1. 请求使用磁盘空间 清单 10. 创建 html5.Log 实例1
2
3
4
5
6
| var logger = null;
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024*10/*10MB*/,
function(grantedBytes) {
logger = new html5.Log(grantedBytes);
logger.setLogLevel(4);
});
|
然后，在程序中就可以使用 html5.Log 来记录信息了。
清单 11. 使用 html5.Log1
2
3
4
5
6
7
| function sum(a,b){
logger.entry("Enter function sum","a="+a+",b="+b);
var result = a+b;
logger.debug("function sum,line 66","The result is:",result);
logger.exit("Exit function sum");
return result;
}
|
下载 log 文件
图 2. 测试页面 点击写日志按钮可以运行测试用例，单击显示日志列表按钮将用下面的表格列出所有的 log 文件，单击某一个日志文件的下载链接，可以下载 log 到本地。页面源码请参考附件中的文件。
图 3. 下载 log 文件 图 4. log 文件内容 |
|
|
|
|
|
