HTML5 FileSystem API 測試（一）

參考書 Using the HTML5 Filesystem API.pdf

用Chrome打開網站： www.baidu.com

打開其JavaScrip控制檯，輸入此js（之後稱腳本一）查看當前本地存儲使用情況:

window.webkitStorageInfo.queryUsageAndQuota(TEMPORARY, function(usage, quota) {
  console.log('Using: ' + (usage / quota) * 100 + '% of temporary storage');
}, function(e) {
  console.log('Error', e);
});

接着執行

var fileEn;
function onFs(fs) {
    fs.root.getFile('log.txt', {create: true, exclusive: true},
        function(fileEntry) {
            // fileEntry.isFile === true
            // fileEntry.name == 'log.txt'
            // fileEntry.fullPath == '/log.txt'
            fileEn=fileEntry;
            console.log('FileEntry Name: ' + fileEntry.name);
            console.log('FileEntry FullPath: ' + fileEntry.fullPath);
            //fileEntry.getMetaData(function(md) {
            //    console.log(md.modificationTime.toDateString());
            //}, onError);
        },
        onError
    );
}



//FileError constants
function onError(err) {
    var msg = 'Error: ';
    switch (err.code) {
        case FileError.NOT_FOUND_ERR:
            msg += 'File or directory not found';
            break;
        case FileError.SECURITY_ERR:
            msg += 'Insecure or disallowed operation';
            break;
        case FileError.ABORT_ERR:
            msg += 'Operation aborted';
            break;
        case FileError.NOT_READABLE_ERR:
            msg += 'File or directory not readable';
            break;
        case FileError.ENCODING_ERR:
            msg += 'Invalid encoding';
            break;
        case FileError.NO_MODIFICATION_ALLOWED_ERR:
            msg += 'Cannot modify file or directory';
            break;
        case FileError.INVALID_STATE_ERR:
            msg += 'Invalid state';
            break;
        case FileError.SYNTAX_ERR:
            msg += 'Invalid line-ending specifier';
            break;
        case FileError.INVALID_MODIFICATION_ERR:
            msg += 'Invalid modification';
            break;
        case FileError.QUOTA_EXCEEDED_ERR:
            msg += 'Storage quota exceeded';
            break;
        case FileError.TYPE_MISMATCH_ERR:
            msg += 'Invalid filetype';
            break;
        case FileError.PATH_EXISTS_ERR:
            msg += 'File or directory already exists at specified path';
            break;
        default:
            msg += 'Unknown Error';
            break;
    };
    console.log(msg);
}


window.webkitRequestFileSystem(TEMPORARY, 2*1024*1024 /*2MB*/, onFs, onError);

以後執行下列代碼和 腳本一

console.dir(fileEn);

運行截圖以下：

 

寫入文件數據測試

var writeToFile=function(fileEntry) {
    // Create a FileWriter object for our FileEntry.
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwrite = function(e) {
        console.log('Write completed.');
      };
      fileWriter.onerror = function(e) {
        console.log('Write failed: ' + e.toString());
      };
      var bb = new WebKitBlobBuilder(); // Create a new Blob on-the-fly.
      bb.append('Lorem Ipsum');
      fileWriter.write(bb.getBlob('text/plain'));
    }, onError);
  }

輸入 腳本一會發現佔用的空間發生變化

 

讀取文件

var reader;
var readFromFile=function(fileEntry) {
    // Obtain the File object representing the FileEntry.
    // Use FileReader to read its contents.
    fileEntry.file(function(file) {
       reader = new FileReader();
       
       reader.readAsText(file); // Read the file as plaintext.
       console.log(reader.result);
    }, onError);
  }

執行查看reader對象狀況

console.dir(reader)