Cordova - 檔案系統

此外掛用於操作使用者裝置上的原生檔案系統。

步驟 1 - 安裝檔案外掛

我們需要在**命令提示符**中執行以下程式碼來安裝此外掛。

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

步驟 2 - 新增按鈕

在此示例中，我們將向您展示如何建立檔案、寫入檔案、讀取檔案和刪除檔案。為此，我們將在**index.html**中建立四個按鈕。我們還將新增一個**textarea**，其中將顯示檔案的內容。

<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 - 新增事件監聽器

我們將在**index.js**中的**onDeviceReady**函式中新增**事件監聽器**，以確保在使用外掛之前所有內容都已啟動。

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 - 建立檔案函式

該檔案將在裝置上的應用根資料夾中建立。為了能夠訪問根資料夾，您需要為您的資料夾提供**超級使用者**訪問許可權。在我們的例子中，根資料夾的路徑是**\data\data\com.example.hello\cache**。目前此資料夾為空。

現在讓我們新增一個函式來建立 log.txt 檔案。我們將把這段程式碼寫在**index.js**中，並向檔案系統傳送請求。此方法使用 WINDOW.TEMPORARY 或 WINDOW.PERSISTENT。儲存所需的大小以位元組為單位（我們的例子中為 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)
   }
	
}

現在我們可以按下**建立檔案**按鈕，警報將確認我們已成功建立檔案。

現在，我們可以再次檢查我們的應用根資料夾，在那裡我們可以找到我們的新檔案。

步驟 4B - 寫入檔案函式

在此步驟中，我們將一些文字寫入我們的檔案。我們將再次向檔案系統傳送請求，然後建立檔案寫入器以便能夠寫入我們分配給**blob**變數的**Lorem Ipsum**文字。

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)
   }
}

按下**寫入檔案**按鈕後，警報將告知我們寫入成功，如下面的螢幕截圖所示。

現在我們可以開啟**log.txt**，看到裡面寫著**Lorem Ipsum**。

步驟 4C - 讀取檔案函式

在此步驟中，我們將讀取 log.txt 檔案並將其顯示在**textarea**元素中。我們將向檔案系統傳送請求並獲取檔案物件，然後我們建立**reader**。載入 reader 後，我們將返回值賦給**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)
   }
}

當我們單擊**讀取檔案**按鈕時，檔案中的文字將寫入**textarea**中。

步驟 4D - 刪除檔案函式

最後，我們將建立一個用於刪除**log.txt**檔案的函式。

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)
   }
}

現在我們可以按下**刪除檔案**按鈕來從應用根資料夾中刪除該檔案。警報將通知我們刪除操作已成功。

如果我們檢查應用根資料夾，我們會發現它為空。

列印頁面