基于HTML5 FileSystem API的使用介绍


Posted in HTML / CSS onApril 24, 2013

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);
HTML / CSS 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3打造百度贴吧的3D翻牌效果示例
Jan 04 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 #HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 #HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 #HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 #HTML / CSS
基于IE10/HTML5 开发
Apr 22 #HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 #HTML / CSS
Javascript 高级手势使用介绍
Apr 21 #HTML / CSS
You might like
万能的php分页类
2017/07/06 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
JavaScript中实现块作用域的方法
2010/04/01 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python dict如何定义
2020/09/02 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
计算机通信专业推荐信
2014/02/22 职场文书
小学生元旦感言
2014/02/26 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
股东合作协议书范本
2014/04/14 职场文书
法学求职信
2014/06/22 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
研讨会通知
2015/04/27 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书