HTML5特性system,科技常识：基于HTML5 FileSystem API的使用介绍

今天小编跟大家讲解下有关基于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);

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。