web-dev-qa-db-ja.com

HTML5ローカルストレージを使用してファイルを保存できますか？そうでない場合、どのように？

ブラウザーメカニズムを介してユーザーのコンピューター上の多くの大きなファイル（ビデオ）をキャッシュ/管理するにはどうすればよいでしょうか（プラグインは許容可能なソリューションです）。私が知ることができることから、ローカルストレージはデータベースタイプのデータであり、ファイルではありません。

javascripthtmlflashlocal-storage
22
Matrym

FileSystem API [1,2]は、将来的に最善の策となるでしょう。ある時点で、それは非常に最先端のエッジでした。しかし、それはw3cによって放棄されました。彼ら自身のドキュメントから：

このドキュメントの作業は中止されており、実装の基礎として参照または使用しないでください。

  1. http://dev.w3.org/2009/dap/file-system/pub/FileSystem/
  2. http://www.html5rocks.com/tutorials/file/filesystem/
10
Derek Slager

他の人が言っているように、HTML5 FileSystem APIは機能していません。 IndexedDBは別のオプションのようです。 こちら を参照してください。

8
acarlon

この質問への回答は、次の質問への回答によって異なります。

  • 現在、ファイルの書き込みのサポートはChromiumベースのブラウザー（ChromeおよびOpera）にのみ存在するという事実で大丈夫ですか？
  • このような機能を利用するために、現時点で独自のAPIを利用しても問題ありませんか？
  • 将来的に上記のAPIが削除される可能性はありますか？
  • 上記のAPIを使用して作成されたファイルをディスク上のsandbox（ファイルの外部に影響を与えない場所）に制限しても問題ありませんか？
  • 仮想ファイルシステム（からアクセスされたときと同じ形式でディスク上に必ずしも存在しないディレクトリ構造）を使用して問題はありませんか？ブラウザ内で）そのようなファイルを表すには？

上記のすべてに「はい」と答えた場合、 File 、 FileWriter および FileSystem APIを使用して、からファイルを読み書きできます。 JavaScriptを使用したブラウザのタブ/ウィンドウのコンテキスト。

以下は、これらのことを行うためにAPIが直接的および間接的に連携して使用される方法の簡単な例です。

BakedGoods *

ファイルを書き込む：

//"SGVsbG8Gd29ybGQh" is "Hello world!" encoded in Base64; raw binary data can
//also be written with the use of Typed Arrays and the appropriate mime type
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8Gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

ファイルを読む：

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

未加工のFile、FileWriter、およびFileSystem APIの使用

ファイルを書き込む：

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                //"SGVsbG8Gd29ybGQh" is "Hello world!" encoded in Base64;
                //raw binary data can also be written with the use of 
                //Typed Arrays and the appropriate mime type
                var dataBlob = new Blob(["SGVsbG8Gd29ybGQh"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

ファイルを読む：

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

非ネイティブ（プラグインベース）ソリューションにも対応しているので、Silverlightを通じてアクセスできる IsolatedStorage で、Silverlightによって有効化されたファイルI/Oを利用できます。

IsolatedStorageは、多くの点でFileSystemに似ています。特に、Sandboxにも存在し、仮想ファイルシステムを利用します。ただし、この機能を利用するには managed code が必要です。このようなコードを記述する必要があるソリューションは、この質問の範囲を超えています。

もちろん、補完するマネージコードを利用し、Javascriptのみを記述して残しておくソリューションは、この質問の範囲内です;）：

//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
    data: [{key: "testFile", value: "SGVsbG8Gd29ybGQh", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem", "silverlight"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

* BakedGoodsは、この人以外の誰もがここで管理しています：）

4
Kevin

FSO.js は、HTML5 FileSystem APIをラップして、サンドボックス化されたファイルシステムで大きなファイルのセットを保存、管理、および操作することを本当に簡単にします。

1
kwh

Html5ローカルストレージのほとんどの部分は上記で説明されています。

ここ https://stackoverflow.com/a/11272187/1460465 同様の質問がありました。ビデオの質問ではなく、ローカルストレージにxmlを追加できるかどうかです。

私の記事の中で、JavaScriptを使用してローカルストレージにxmlを解析し、オフラインでクエリする方法についての記事で言及しました。

あなたを助けるかもしれません。

1
ruud van reede

現在、ほとんどの実装では、HTML5ローカルストレージはデフォルトで5MBに制限されています。そこにたくさんのビデオを保存できるとは思いません。

出典： https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html

1
deceze