基于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); </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);


本文标签:

版权声明:若无特殊注明,本文皆为《司马迁》原创,转载请保留文章出处。

本文链接:基于HTML5 FileSystem API的使用介绍 - http://tv1314.com/post-311.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    Watish Lv.5 Chrome 53.0.2785.124 Chrome 53.0.2785.124 Android 4.4.4 Android 4.4.4 回复

    厉害了

    江苏省 电信(全省通用)

    00:00 / 00:00
    顺序播放