HTML5 FileSystem API 介绍

安全沙箱

我们知道,出于安全考虑,浏览器自身的安全沙箱机制,会限制浏览器脚本去操作本地文件系统。但是随着web app的发展,offline 功能的实现,更迫切的需要浏览器本地文件操作的支持。
目前FILE IO 的实现方式主要有臭名昭著的ActiveX插件(IE),和用于跨浏览器插件开发NPAPI。当初IE确实是支持NPAPI的,后来声称NPAPI有安全问题用上了自己的ActiveX。
浏览器本身限制了本地文件的读写,这使得浏览器的功能弱化了(当然也比较安全),有一个浏览器(当然还要有网络)就能做所有事情的愿望目前还不能完全实现,当然chromium已经在这方面走出了一大步。火狐和谷歌的插件中所有需要保存文件到系统的扩展都用到了NPAPI,如谷歌官方开发的十分好用的网页截图(用到NPAPI的扩展不能同步比较悲剧)。
这里主要介绍HTML5 的 FileSystem API。

API介绍

HTML5 FileSystem API包括几个部分:
1.文件读取接口: File/Blob, FileList, FileReader
2.创建和写入接口: BlobBuilder, FileWriter
3.目录和文件读取接口: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
W3C规范定义了两种方式异步和同步(asynchronous and synchronous)。异步方式适用于普通程序,可以防止阻塞。同步方式用于Web Workers。

安全限制

考虑到安全性,API接口设计时做了一些限制。
1.存储配额限制(quota limitations)
2.同源限制,如只能读写同域内的cookie和localStorage
3.文件类型限制,限制可执行文件的创建或者重命名为可执行文件

浏览器支持

目前chrome是唯一支持的浏览器。

配额

为什么需要配额限制?任何东西没有限制都将导致滥用。只是访问一个网址硬盘多了几G的数据谁都不会干(想象力丰富的童鞋想到了几G的电影。。)。写入任何文件前需要向浏览器提交一个预计的文件大小(单位为byte),对于其他本地数据的读写操作同样有这个要求:

var db = window.openDatabase(
'MyDB', // dbName
'1.0', // version
'test database', // description
2 * 1024 * 1024, // estimatedSize in bytes (2MB)
function(db) {} // optional creationCallback
);

在chrome浏览器中可以通过 chrome://chrome/settings/cookies 查看网站存储的数据包括cookie,本地储存和文件系统。

存储类型

文件存储类型分为两种:临时存储(temporary)和持久存储(persistent)。除了这两种,chrome 的扩展有特权:unlimited storage!在扩展的.manifest文件说明即可。在chrome的快捷方式后加上–unlimited-quota-for-files 后运行标识网站可以享有unlimited storage特权,当然建议只有在测试时这么做。
对于持久存储,因为会因为种原因数据被删除,所以所谓的持久存储并不能100%保证数据持久。

打开文件系统

方法:window.requestFileSystem(type, size, successCallback, opt_errorCallback)
参数说明:
type:TEMPORARY
size:估计所需空间
successCallback:请求成功时回调函数(参数为FileSystem对象)
opt_errorCallback:请求失败回调函数(参数为FileError对象)

var onError = function(fs) {
console.log('There was an error');
};
var onFS = function(fs) {
console.log('Opened filesystem: ' + fs.name);
};
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onFs, onError);

应用第一次调用该程序时将创建一个沙箱内的存储空间。
FileSystem对象包括两个属性:
name:唯一的FileSystem名字,由浏览器分配
root:只读,表示FileSystem 顶层

FileError包括一个code属性用以标记错误类型:

function onError(err) {
var msg = 'Error: ';
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg += 'File or directory not found';
break;
case FileError.SECURITY_ERR:
msg += 'Insecure or disallowed operation';
break;
case FileError.ABORT_ERR:
msg += 'Operation aborted';
break;
case FileError.NOT_READABLE_ERR:
msg += 'File or directory not readable';
break;
case FileError.ENCODING_ERR:
msg += 'Invalid encoding';
break;
case FileError.NO_MODIFICATION_ALLOWED_ERR:
msg += 'Cannot modify file or directory';
break;
case FileError.INVALID_STATE_ERR:
msg += 'Invalid state';
break;
case FileError.SYNTAX_ERR:
msg += 'Invalid line-ending specifier';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg += 'Invalid modification';
break;
case FileError.QUOTA_EXCEEDED_ERR:
msg += 'Storage quota exceeded';
break;
case FileError.TYPE_MISMATCH_ERR:
msg += 'Invalid filetype';
break;
case FileError.PATH_EXISTS_ERR:
msg += 'File or directory already exists at specified path';
break;
default:
Handling Errors | 13
msg += 'Unknown Error';
break;
};
console.log(msg);
}

未完。待续。

参考:http://www.html5rocks.com/zh/tutorials/file/filesystem/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>