HTML5/JSでファイルを書き込むことはできますか？

Question

HTML5/JSからファイルに書き込む方法があるのだろうか？ broswerでは...

Answer 1

はい、新しいFileWriter APIを使用します。

http://www.w3.org/TR/file-writer-api/

あなたはここに現在のブラウザのサポートを見ることができます：ユーザのファイルへのWebページへのアクセスを与えるためhttp://caniuse.com/#feat=filesystem

Answer 2

私の知る限りでは、あなたは、HTML5からファイルに書き込むことはできませんでしょうセキュリティ上のリスクがあります。

ページに後でアクセスできるようにデータを保存するだけであれば、HTML5にはWeb Storageというものがあります。

または、クッキー（非常に小さい場合）またはサーバーにデータを保存することができます。

Answer 3

はい、& HTML5 + JSを使用してファイルを読むことは可能です。

リンクは作業を開始する - あなたの最終目標は、ユーザーが保存できるようにすると仮定するとhttp://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Answer 4

- 私はまた、あなたが役に立つかもしれません同じトピックにSpeckyBoyのためにしばらく前に記事を書いた

Exploring FileSystem APIリンクを右クリックして[名前を付けて保存...]を選択したときと同じように、セキュリティ上の考慮が必要なため、これらのAPIのブラウザ対応範囲はまだありません。

APIは、data: uriへのリンクと、推奨ファイル名を指定するdownload属性を使用しています。例えば：

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a> 

クリックすると、少なくともChromeで、これはあなたのダウンロードディレクトリ内earth.txtとしてテキストmostly harmless（および末尾の改行）を含むファイルを保存します。代わりにJavaScriptからファイルの内容を設定するには、最初にこの関数を呼び出す：

function setSaveFile(contents, file_name, mime_type) { 
    var a = document.getElementById('save'); 
    mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c 
    if (file_name) a.setAttribute('download', file_name); 
    a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || ''); 
} 

Answer 5

別の可能性は、WindowsプラットフォームでのClickOnceアプリのようなものを作成することを検討することです。これにより、ユーザーのOSで実行されるダウンロード可能な実行可能ファイルへのリンクが表示されますが、データを送信および取得するためのWebベースのコールバックが作成される可能性があります。 ClickOnceアプリケーションにはブラウザコントロールが組み込まれているため、ユーザーのストレージに直接通話する機能を備えたWeb互換アプリケーションが両方とも用意されています。

Answer 6

この質問への回答は以下の質問に回答によって異なります。あなたはそのような機能をサポート事実、現在唯一のクロムベースのブラウザ（クローム&オペラ）に存在する微細な

• ていますか？
• このような能力を活用するための独自のAPIを利用しても問題ありませんか？
• 今後このAPIを削除する可能性はありますか？
• サンドボックス（そのファイルの外側には効果がない場所）に、上記のAPIで作成されたファイルをディスクに圧縮しても問題ありませんか？

あなたは上記のすべてに「はい」と答えた場合は、[はい、FileWriterとFileSystem APIを使用して、あなたはJavascriptを使用してブラウザのタブ/ウィンドウのコンテキストからファイルを書き込むことができます。ここで

は、APIが、これを行うためにタンデムで使用されているかの簡単な例です：BakedGoods *、共通のストレージ操作を行うために使用することができます統一されたインタフェースを確立JavaScriptライブラリで

function onQuotaRequestSuccess(grantedQuota) 
{ 

    function saveFile(directoryEntry) 
    { 

     function createFileWriter(fileEntry) 
     { 

      function write(fileWriter) 
      { 
       var dataBlob = new Blob(["Hello world!"], {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); 

上記（ファイルシステムを含む）すべてのネイティブ、およびいくつかの非ネイティブの貯蔵施設は、これを用いて達成される：

bakedGoods.set({ 
    data: [{key: "testFile", value: "Hello world!", type: "text/plain"}], 
    storageTypes: ["fileSystem"], 
    options: {fileSystem:{storageType: Window.PERSISTENT}}, 
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){} 
}); 

ファイルシステムの仕様では、ディレクトリ構造がディスク上に表示される方法にはガイドラインを定義しません。たとえばChromiumベースのブラウザでは、サンドボックスには仮想ファイルシステム（ブラウザ内からアクセスしたときと同じ形式でディスクに必ず存在するディレクトリ構造ではありません）が作成され、ディレクトリとファイルが作成されますAPIが配置されます。

APIを使用してシステムにファイルを書き込むことはできますが、APIを使用しないで（FileSystem APIを使用しないで）ファイルを検索することは軽微です。

* BakedGoodsは、ローカルまたはリモートでこの右ここ男:)