JavaScriptでFile Read/Writeをやってみた

前回の続き。以下を参考にして、JavaScriptからFile Read/Writeを行いました。

作成したソースはGithubにアップロードしました。index.htmlを開き、saveボタンを押下するとテキストの内容を保存、loadにてテキストの内容を読み込みます。

# 動作確認は Chrome バージョン 31.0.1650.63 mで実施

以下、各処理のまとめ。

requestQuotaでストレージクオータを要求する

JavaScriptからデータ保存するための許可を取得します。FileSystem API について知るで使用されている「window.webkitStorageInfo」は非推奨のようなので、こちらを参照して「navigator.webkitPersistentStorage」に置き換えました。

■「window.webkitStorageInfo」を使用した時に表示されるメッセージ

window.webkitStorageInfo' is deprecated. Please use 'navigator.webkitTemporaryStorage' or 'navigator.webkitPersistentStorage' instead.

またローカルでhtmlファイルを動かして「navigator.webkitPersistentStorage」を実行すると実行できず、コンソールで以下のメッセージが表示されます。

message: "The implementation did not support the requested type of object or operation."

name: "NotSupportedError"

xamppでApacheを起動し、Apache上で動かすことで動きました。(ここが一番詰まった。。)

ここまでのソースファイル

window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

function onError () { console.log ('Error : ', arguments); }

navigator.webkitPersistentStorage.requestQuota (1024*1024*1024, function(grantedBytes) {
  console.log ('requestQuota: ', arguments);
  requestFS(grantedBytes);
}, onError);

function requestFS(grantedBytes) {
  window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, function(fs) {
    console.log ('fs: ', arguments); // I see this on Chrome 27 in Ubuntu
  }, onError);
}

ファイルを作成する

window.webkitRequestFileSystemのコールバックからgetFileを実行して'log.txt'を作成する。

requestFS以下を変更する。

function requestFS(grantedBytes) {
  window.webkitRequestFileSystem(window.PERSISTENT, grantedBytes, onInitFs, onError);
}

function onInitFs(fs) {
  // getFile の第2引数で「create: true」を付けるとファイルを新規作成する。
  fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
    console.log(fileEntry.isFile); // true
    console.log(fileEntry.name); // log.txt 
    console.log(fileEntry.fullPath); // /log.txt 
  }, onError);
}

ファイルを読み込む

getFileを以下のように変更する。

  fs.root.getFile('log.txt', {}, function(fileEntry) {

    // Get a File object representing the file,
    // then use FileReader to read its contents.
    fileEntry.file(function(file) {
       console.log(file);
       var reader = new FileReader();

       reader.onloadend = function(e) {
         var txtArea = document.createElement('textarea');
         txtArea.value = this.result;
         document.body.appendChild(txtArea);
       };
       reader.readAsText(file);
    }, onError);

  }, onError);

処理の流れは

getFileでlog.txt を取得する
fileEntry.fileでlog.txtを読み込むためのFileReaderを生成し、readAsTextで読み込む
onloadendで、読み込んだ内容をtextareaに反映する。

となっています。log.txt が空の時は何も作成されません。

ファイルに書き込む

getFileを以下のように変更する。 BlobBUilder, window.WebKitBlobBuilderは使えないため、Blobを直接使う。

  fs.root.getFile('log.txt', {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log('Write completed.');
      };

      fileWriter.onerror = function(e) {
        console.log('Write failed: ' + e.toString());
      };

      // Create a new Blob and write it to log.txt.
      var bb = new Blob(['Lorem Ipsum']);
      fileWriter.write(bb);
    }, onError);
  }, onError);

ファイルを削除する

getFileを以下のように変更する。削除が完了すると、'File removed'を出力する。

  fs.root.getFile('log.txt', {create: false}, function(fileEntry) {

    fileEntry.remove(function() {
      console.log('File removed.');
    }, onError);
  }, onError);

ここまでで、File Read/Write ができるようになりました(作成したソース)。

requestQuotaでストレージ クオータを要求する