Cordova 文件系統(tǒng)

此插件用于操作用戶設(shè)備上的本機文件系統(tǒng)。

步驟1 - 安裝文件插件

我們需要運行命令提示符中的代碼來安裝此插件。

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

步驟2 - 添加按鈕

在這個例子中，我們將向您展示如何創(chuàng)建文件，寫入文件，讀取它和刪除它。因此，我們將在 index.html 中創(chuàng)建四個按鈕。我們還將添加 textarea ，我們將顯示我們文件的內(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)聽器

我們將在 index.js 中的 onDeviceReady 函數(shù)中添加事件監(jiān)聽器，以確保在插件使用之前所有內(nèi)容都已啟動。

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è)備上的應(yīng)用程序根文件夾中創(chuàng)建。要訪問根文件夾，您需要為您的文件夾提供超級用戶訪問權(quán)限。在我們的例子中，根文件夾的路徑是 \\ data \\ data \\ com.example.hello \\ cache 。此時此文件夾為空。

現(xiàn)在讓我們添加將創(chuàng)建 log.txt 文件的函數(shù)。我們將在 index.js 中編寫此代碼。我們首先請求文件系統(tǒng)。此方法使用四個參數(shù)。類型可以是 WINDOW.TEMPORARY 或 WINDOW.PERSISTENT，size是存儲所需的字節(jié)值(在本例中為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)在我們可以按 CREATE FILE 按鈕，警報將確認我們已成功創(chuàng)建文件。

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

步驟4B - 寫文件功能

接下來我們要做的是在文件中寫一些文本。我們將再次請求文件系統(tǒng)，然后創(chuàng)建文件寫入器，以便能夠?qū)懭胛覀兎峙浣o 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)
   }
	
}

按寫入文件按鈕后，警報將通知我們寫入成功。

現(xiàn)在我們可以打開 log.txt，看到 Lorem Ipsum 寫在里面。

步驟4C - 讀取文件功能

在此步驟中，我們將閱讀 log.txt 文件，并將其顯示在 textarea 元素中。首先我們請求文件系統(tǒng)并獲取文件對象，然后我們正在創(chuàng)建 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)
   }
	
}	

當我們單擊 READ FILE 按鈕時，文件中的文本將寫在 textarea 中。

步驟4D - 刪除文件功能

最后，我們將創(chuàng)建刪除 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)
   }
	
}	

我們現(xiàn)在可以按刪除文件按鈕從應(yīng)用程序根文件夾中刪除該文件。該警報將通知我們刪除成功。

如果我們檢查應(yīng)用程序根文件夾，我們將看到它是空的。