基于HTML5 FileSystem API的使用介绍

但是这是有个问题，这样做的话每次加载页面都会申请，这肯定不是我们想要的，我们要 的是在有数据的时候就可以读取数据。

判断是否申请过空间
所以我们需要读取浏览器的数据，看看是否已有存储。这就用到了另一个API：

复制代码
void queryUsageAndQuota(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

这个API可以查询当前web的空间情况，如果成功的话就会调用successCallback回调函数 并把已用空间和全部空间作为参数传入方法中。如果失败则调去errorCallback。

复制代码
window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, remaining){
if(remaining == ""){
console.log("未申请空间。");
}else{
console.log("已使用空间"+used);
console.log("全部空间"+remaining);
}
},
errorHandler); </p> <p>
我们可以通过判断remaining参数来判断是否有申请空间，如果没有申请，则返回上一步申请空间。 如果已经有空间的话，则需要得到空间的跟文件，这样才能操作数据。

获取文件入口
FileSystem使用了特殊的文件系统和沙盒模式，在电脑上或者其他web中是无法访问沙盒中的文件的 ，只能用对应的格式去访问。

在浏览器中输入：

?filesystem:http://catcoder.com/persistent/
　　

这样可以访问catcoder.com这个网站在本机永久数据，把persistent换成temporary则是读取临时空间。

然后我们就可以通过URL和对应API获取文件的入口(Lets you look up the entry for a file or directory with a local URL)。

复制代码
void resolveLocalFileSystemURL(
in DOMString url,
in EntryCallback successCallback,
in optional ErrorCallback errorCallback
);

下面就可以读取本机存储的数据了

复制代码
var url = "filesystem:http://" + window.location.host + "/persistent/catwrite_documents/";
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader();
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title("默认文件", "");
console.log("没有文件！");
}else{
console.log("读取到" + results.length + "个文件");
for(var i = 0; i < results.length; i++){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name);
}
}
},errorHandler);
};
readEntries();
},errorHandler);