html5 filesystem api,基于HTML5 FileSystem API的使用介绍

html5的强大之一就是允许web程序申请一些临时或者永久的空间(quota)在这里可以进行 数据的存储甚至文件的操作。

filesystem提供了文件夹和文件的创建、移动、删除等操作，大大方便了数据的本地处理， 而且所有的数据都是在沙盒(sandboxed)中，不同的web程序不能互相访问，这就保证了数据 的完整和安全。

在catwrite项目中，运用了html5的这个特性进行数据的存储，很是方便，只是目前来说只有 chrome浏览器对filesystem api支持的比较好，所以只能运行在chrome浏览器中。

在完成这个功能的时候，查阅了很多资料，有一些资料是一年前的，但是随着浏览器版本的 变化，一些代码已经老化，在这里一一总结和整理。这里只列举了项目中用到的api，算是 对完成功能的一次梳理。

申请空间为了进行数据的存储，必须要向浏览器进行申请，如果是永久存储还会向用户进行询问，只有 同意后才会继续执行。

首先必须要声明想要的权限。

复制代码代码如下:

window.requestfilesystem = window.requestfilesystem || window.webkitrequestfilesystem; //文件系统请求标识

window.resolvelocalfilesystemurl = window.resolvelocalfilesystemurl || window.webkitresolvelocalfilesystemurl; //根据url取得文件的读取权限

得到系统的权限后就可以向浏览器申请空间

复制代码代码如下:

window.requestfilesystem(window.persistent, //persistent(永久) or temporary(临时)

1024*1024, //1m

oninitfs, //成功后的回调函数

errorhandler); //错误后的回调函数

回调函数

复制代码代码如下:

function oninitfs(fs){

fs.root.getdirectory('catwrite_documents', {create: true}, function(direntry) {

console.log('you have just created the ' + direntry.name + ' directory.');

}, errorhandler);

}

//错误回调

function errorhandler(err){

var msg = 'an error occured: ';

switch (err.code) {

case fileerror.not_found_err:

msg += 'file or directory not found';

break;

case fileerror.not_readable_err:

msg += 'file or directory not readable';

break;

case fileerror.path_exists_err:

msg += 'file or directory already exists';

break;

case fileerror.type_mismatch_err:

msg += 'invalid filetype';

break;

default:

msg += 'unknown error';

break;

};

console.log(msg + err);

}

如果成功后悔调用oninitfs回调函数，在里面用了getdirectory方法用来创建一个文件夹，这下面再说。

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

判断是否申请过空间所以我们需要读取浏览器的数据，看看是否已有存储。这就用到了另一个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);

我们可以通过判断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);