根据HTML5 FileSystem API的应用详细介绍

日期:2021-01-20 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

HTML5的强劲之1便是容许web程序流程申请办理1些临时性或永久性的室内空间(Quota)在这里能够开展 数据信息的储存乃至文档的实际操作。

FileSystem出示了文档夹和文档的建立、挪动、删掉等实际操作,大大气便了数据信息的当地解决, 并且全部的数据信息全是在沙盒游戏(sandboxed)中,不一样的web程序流程不可以相互之间浏览,这就确保了数据信息 的详细和安全性。

在CatWrite新项目中,应用了HTML5的这个特点开展数据信息的储存,很是便捷,只是现阶段来讲仅有 Chrome访问器对FileSystem API适用的较为好,因此只能运作在Chrome访问器中。

在进行这个作用的情况下,查阅了许多材料,有1些材料是1年前的,可是伴随着访问器版本号的 转变,1些编码早已脆化,在这里11总结和梳理。这里只例举了新项目选用到的API,算是 对进行作用的1次整理。

申请办理室内空间
以便开展数据信息的储存,务必要向访问器开展申请办理,假如是永久性储存还会向客户开展了解,仅有 愿意后才会再次实行。

最先务必要申明要想的管理权限。

拷贝编码
编码以下:

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方式用来建立1个文档夹,这下面再说。

可是这是有个难题,这样做的话每次载入网页页面都会申请办理,这毫无疑问并不是大家要想的,大家要 的是在了解据的情况下便可以载入数据信息。

分辨是不是申请办理过室内空间
因此大家必须载入访问器的数据信息,看看是不是已有储存。这就用到了另外一个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主要参数来分辨是不是有申请办理室内空间,假如沒有申请办理,则回到上1步申请办理室内空间。 假如早已有时间间的话,则必须获得室内空间的跟文档,这样才可以实际操作数据信息。

获得文档通道
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);