HTML5 ファイルシステム API の使用の概要_html5 チュートリアル スキル

HTML5 の強みの 1 つは、Web プログラムがデータの保存やファイル操作さえも実行できる一時的または永続的なスペース (クォータ) を適用できることです。

FileSystem は、フォルダーやファイルの作成、移動、削除などの操作を提供します。これにより、データのローカル処理が大幅に容易になります。また、すべてのデータはサンドボックス内にあり、異なる Web プログラムが相互にアクセスすることはできません。データの整合性とセキュリティ。

CatWrite プロジェクトでは、HTML5 のこの機能がデータの保存に使用されており、非常に便利ですが、現時点では Chrome ブラウザーのみが FileSystem API をより適切にサポートしているため、Chrome ブラウザーでのみ実行できます。

この機能を完成させるにあたり、多くの情報を参照しましたが、ブラウザのバージョンの変更に伴い、一部のコードが古くなっているため、ここで一つずつ要約して整理します。ここにはプロジェクトで使用される API のみがリストされており、完成した機能の概要が示されています。

スペースの申請
データを保存するには、ブラウザに申請する必要があります。永続的な保存の場合は、ユーザーに要求され、同意した場合にのみ実行が続行されます。

まず、必要な権限を宣言する必要があります。

コードをコピーします

コードは次のとおりです:

window.requestFileSystem = window。 requestFileSystem || window.webkitRequestFileSystem; // ファイル システム リクエストの識別
window.resolveLocalFileSystemURL = window.webkitResolveLocalFileSystemURL; // URL に基づいてファイルの読み取り権限を取得します。 >システムの許可を取得後、ブラウザからスペース申請が可能です

コードをコピー

コードは以下の通りです。

window.requestFileSystem(window.PERSISTENT, //永続的(永続) または一時的(一時的)

1024*1024, //1M

onInitFs, // 成功後のコールバック関数
errorHandler); //エラー後 コールバック関数

コードをコピー

コードは次のとおりです:

function onInitFs(fs){ fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) { console .log('' dirEntry. name ' ディレクトリが作成されました。');

}, errorHandler)

}

//エラー コールバック
関数 errorHandler(err){
var msg = 'エラーが発生しました: ';
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg = 'ファイルまたはディレクトリが見つかりません'; FileError.NOT_READABLE_ERR:
msg = 'ファイルまたはディレクトリが読み取れません';
case FileError.PATH_EXISTS_ERR:
msg = 'ファイルまたはディレクトリが存在します'; > case FileError.TYPE_MISMATCH_ERR:
msg = ' 無効なファイルタイプ';
デフォルト:
msg = '
ブレーク; .log(msg err);
}


成功した場合は、OnInitFs コールバック関数を呼び出して、getDirectory メソッドを使用してフォルダーを作成したことを後悔することになります (これについては後述します)。

しかし、これを行うと、ページがロードされるたびに適用されてしまいます。これは、データがあるときにデータを読み取ることができるようにすることを目的としたものではありません。


スペースが適用されているかどうかを確認します

そのため、ブラウザのデータを読み取って、データが保存されているかどうかを確認する必要があります。これは別の API を使用します:

コードをコピーします

コードは次のとおりです:

void queryUsageAndQuota(
in DOMString url, in EntryCallback successCallback,
in オプションの ErrorCallback errorCallback
);

この API は、現在の Web のスペース ステータスをクエリできます。成功した場合、successCallback コールバック関数が呼び出され、使用済みスペースと合計スペースがパラメータとしてメソッドに渡されます。失敗した場合は、errorCallback が呼び出されます。

コードをコピーします


コードは次のとおりです:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
function(used, left){
if(remaining == ""){
console.log("スペースが適用されていません。 ");
}else{
console.log("使用済みスペース" used);
console.log("すべてのスペース" 残り);
}
},
errorHandler );

残りのパラメータを判断することで、アプリケーションスペースがあるかどうかを判断できます。アプリケーションがない場合は、前のステップに戻ってスペースを申請します。 すでにスペースがある場合は、データを操作するためにスペースとファイルを取得する必要があります。

ファイル エントリの取得
ファイル システムは特殊なファイル システムを使用しており、サンドボックス内のファイルには、対応する形式のアクセスのみを使用できます。

ブラウザに次のように入力します:

?ファイルシステム:http://catcoder.com/persistent/

このようにして、このマシン上の catcoder.com Web サイトの永続データにアクセスして、一時スペースを読み取ることができます。

次に、URL と対応する API を通じてファイルのエントリを取得できます (ローカル URL でファイルまたはディレクトリのエントリを検索できます)。

コードをコピーします

コードは次のとおりです:

voidsolveLocalFileSystemURL(
DOMString url 、
EntryCallback successCallback、
オプションの 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("Read results.length "files");
for(var i = 0; i < results . length; i ){
console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name); ) ;
};
readEntries()
},