本地存贮-文件系统

HTML5新添加了对本地存储的支持，有了本地文件系统FileSystemAPI，网络应用就可以创建、读取、导航用户本地文件系统中的沙盒部分以及向其中写入数据。

搜索发现网上文章很多，很都是很久以前的文章了，api有一些更新，导致一些代码无法使用，经过多番查找，这里列出一些总结。

1. 请求文件系统：

文件系统有两种类型：PERSISTENT（持久的）、TEMPORARY（临时的）

临时文件系统无需向用户申请，可直接使用：

//查看空间地址：filesystem:http://host/temporary
window.requestFileSystem(type, size, successCallback, errorHandler);

持久文件系统需要经过用户同意：

//向用户申请空间
//查看空间地址：filesystem:http://host/persistent
navigator.webkitPersistentStorage.requestQuota(size,function(grantedBytes){
window.requestFileSystem(type, grantedBytes, successCallback, errorHandler);
},function(e){
console.log('Error', e);
});

2 写文件操作

fs.root.getFile(path, {create: true,exclusive: false}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
//缓存成功
fileWriter.onwriteend = function(e) {
console.log('Write completed.');
callback && callback();
};
//缓存失败
fileWriter.onerror = function(e) {
console.log('Write failed: ' + e.toString());
};

fileWriter.write(blob); //写入Blob数据

}, errorHandler);

},errorHandler);

3.读文件操作

fs.root.getFile(path, {create: false}, function(fileEntry) {
fileEntry.file(function(file) {
callback && callback(file);
}, errorHandler);
}, err);

4.删除文件

fs.root.getFile(path, {create: false}, function(fileEntry) {
fileEntry.remove(function() {
console.log( path + ' have removed.');
callback && callback();
}, errorHandler);

}, errorHandler);

下面是完整代码：

/**
* 本地文件系统
* @type {{init, writeFile, readFile, delFile, DIRS}}
*/
var FSSYS = (function() {
window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

//文件夹
var DIRS = {
"video":"/videos", //视频文件夹
"image":"/images", //图片文件夹
"assets":"/assets"
};

var FS = null;//H5文件系统Obj
var TYPE  = {
"per": window.PERSISTENT,
"temp":window.TEMPORARY
};

/** 初始H5本地文件系统 */
var init = function(){
var type = TYPE.per;
var size =  1024*1024*50;  //字节为单位

if(typeof nw != "undefined"){ //nwjs环境无需申请空间 可直接使用 且无大小限制
window.requestFileSystem(type, size, successCallback, errorHandler);
}else{
return false;
//向用户申请空间   查看空间地址：filesystem:http://host/persistent
navigator.webkitPersistentStorage.requestQuota(size,function(grantedBytes){
window.requestFileSystem(type, grantedBytes, successCallback, errorHandler);
},function(e){
console.log('Error', e);
});

//下面这种写法已经废弃
// window.webkitStorageInfo.requestQuota(type, size, function(grantedBytes) {
//     window.requestFileSystem(type, grantedBytes, successCallback, errorHandler);
// }, function(e) {
//     console.log('Error', e);
// });
}
};

/**
* 初始化成功回调
* @param  {[type]} fs [description]
* @return {[type]}    [description]
*/
var successCallback = function (fs) {
FS = fs;
//创建文件夹
fs.root.getDirectory(DIRS.assets, {create: true}, function(dirEntry) {
console.log('已经创建文件夹： ' + dirEntry.name);
}, errorHandler);
};

/**
* 错误处理
* @param e
* @returns {{init: init}}
*/
var errorHandler = function(e) {
var message = e.message;
console.log(message);
};

/**
* 缓存H5本地文件
* @param path 文件路径
* @param blob 代写入的数据 Blob类型
* @param callback 成功回调
*/
var writeFile = function(path,blob,callback){
if(FS==null){
return ;
}
FS.root.getFile(path, {create: true,exclusive: false}, function(fileEntry) {

fileEntry.createWriter(function(fileWriter) {
//缓存成功
fileWriter.onwriteend = function(e) {
console.log('Write completed.');
callback && callback();
};
//缓存失败
fileWriter.onerror = function(e) {
console.log('Write failed: ' + e.toString());
};

fileWriter.write(blob);

}, errorHandler);

},errorHandler);
};

/**
* 读取H5本地文件
* @param path 文件路径
* @param callback 读取成功回调 file类型数据 Blob子类
*/
var readFile = function(path,callback,err){
if(FS==null){
err();
}else{
FS.root.getFile(path, {create: false}, function(fileEntry) {
fileEntry.file(function(file) {
callback && callback(file);
}, errorHandler);
}, err);
}

};

/**
* 删除文件
* @param  {[type]}   path     [description]
* @param  {Function} callback [description]
* @return {[type]}            [description]
*/
var delFile = function(path,callback){
if(FS==null){
return ;
}
FS.root.getFile(path, {create: false}, function(fileEntry) {
fileEntry.remove(function() {
console.log( path + ' have removed.');
callback && callback();
}, errorHandler);

}, errorHandler);
};

return {
init:init,
writeFile:writeFile,
readFile:readFile,
delFile:delFile,
DIRS:DIRS
}
})();

参考

http://www.cnblogs.com/zhwl/p/3201975.html