第1步 - 安裝文件插件

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-file

第2步 - 添加按鈕

在這個(gè)例子中，我們將向你展示如何創(chuàng)建文件，寫入，讀取，并刪除文件。出于這個(gè)原因，我們將在 index.html 文件中創(chuàng)建四個(gè)按鈕。我們還將添加文本區(qū)域，用來(lái)展示文件的內(nèi)容。

<button id = "createFile">CREATE FILE</button>
<button id = "writeFile">WRITE FILE</button>
<button id = "readFile">READ FILE</button>
<button id = "removeFile">DELETE FILE</button>

<textarea id = "textarea"></textarea>

第3步 - 添加事件監(jiān)聽(tīng)器

document.getElementById("createFile").addEventListener("click", createFile);
document.getElementById("writeFile").addEventListener("click", writeFile);
document.getElementById("readFile").addEventListener("click", readFile);
document.getElementById("removeFile").addEventListener("click", removeFile);

步驟4A- 創(chuàng)建文件函數(shù)

該文件將在設(shè)備上的應(yīng)用程序的根文件夾中創(chuàng)建。為了能夠訪問(wèn)根文件夾你需要提供給超級(jí)用戶訪問(wèn)文件夾。在我們的例子路徑根目錄文件夾是 \data\data\com.yiibai.hello\cache。當(dāng)前此文件夾為空。

現(xiàn)在讓我們添加的函數(shù)來(lái)創(chuàng)建log.txt文件。我們將編寫代碼在index.js。我們首先請(qǐng)求文件系統(tǒng)。此方法使用四個(gè)參數(shù)。類型可以是WINDOW.TEMPORARY或WINDOW.PERSISTENT，大小以字節(jié)值，需要存儲(chǔ)(在本示例中是5MB)。

function createFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {
      fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
         alert('File creation successfull!')
      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

現(xiàn)在，我們可以按創(chuàng)建文件按鈕，彈窗提示將確認(rèn)成功創(chuàng)建文件。

現(xiàn)在，我們可以再次檢查您的應(yīng)用程序的根文件夾，新文件也將在里邊。

步驟4b - 寫文件函數(shù)

我們要做的下一件事就是寫一些文本到文件中。我們將再次請(qǐng)求的文件系統(tǒng)，然后創(chuàng)建文件寫入器寫入，我們分配存有 Lorem Ipsum 文本給 blob 變量。

function writeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {

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

         fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function(e) {
               alert('Write completed.');
            };

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

            var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
            fileWriter.write(blob);
         }, errorCallback);

      }, errorCallback);

   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}

按 WRITE FILE 按鈕后，警告會(huì)通知我們：寫入成功。

現(xiàn)在，我們可以打開(kāi) log.txt，看到存有Lorem Ipsum 在里面了。

步驟4C - 讀文件函數(shù)

在這一步中，我們將讀取 log.txt 文件內(nèi)容并在 textarea 元素顯示。首先，我們請(qǐng)求的文件系統(tǒng)，并得到該文件對(duì)象，那么正在創(chuàng)建讀取器。當(dāng)讀寫器被加載，我們將返回值指定到 textarea。

function readFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

   function successCallback(fs) {

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

         fileEntry.file(function(file) {
            var reader = new FileReader();

            reader.onloadend = function(e) {
               var txtArea = document.getElementById('textarea');
               txtArea.value = this.result;
            };

            reader.readAsText(file);

         }, errorCallback);

      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}	

當(dāng)我們點(diǎn)擊READ FILE 按鈕，從文件中的文本將被讀取放入 textarea 里面。

步驟4D - 刪除文件函數(shù)

function removeFile() {
   var type = window.TEMPORARY;
   var size = 5*1024*1024;

   window.requestFileSystem(type, size, successCallback, errorCallback)

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

         fileEntry.remove(function() {
            alert('File removed.');
         }, errorCallback);

      }, errorCallback);
   }

   function errorCallback(error) {
      alert("ERROR: " + error.code)
   }
	
}	

現(xiàn)在，我們可以按DELETE FILE 按鈕將刪除應(yīng)用程序的根文件夾中的文件。提示通知我們刪除成功。

如果我們檢查應(yīng)用程序的根文件夾，我們會(huì)看到，現(xiàn)在沒(méi)有任何文件，它是空的。