本地存贮-文件系统

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