Cordova - File System

Questo plugin viene utilizzato per manipolare il file system nativo sul dispositivo dell'utente.

Passaggio 1: installazione di File Plugin

È necessario eseguire il codice seguente nel file command prompt per installare questo plugin.

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

Passaggio 2: aggiungere pulsanti

In questo esempio, ti mostreremo come creare file, scrivere su file, leggerlo ed eliminarlo. Per questo motivo creeremo quattro pulsanti inindex.html. Aggiungeremo anchetextarea in cui verrà mostrato il contenuto del nostro file.

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

Passaggio 3: aggiungere ascoltatori di eventi

Aggiungeremo event listeners nel index.js dentro il onDeviceReady funzione per garantire che tutto sia iniziato prima che il plugin venga utilizzato.

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

Passaggio 4A - Funzione Crea file

Il file verrà creato nella cartella principale delle app sul dispositivo. Per poter accedere alla cartella principale è necessario forniresuperuseraccesso alle tue cartelle. Nel nostro caso, il percorso della cartella principale è\data\data\com.example.hello\cache. Al momento questa cartella è vuota.

Aggiungiamo ora una funzione che creerà il file log.txt. Scriveremo questo codice in formatoindex.jse invia una richiesta al file system. Questo metodo utilizza WINDOW.TEMPORARY o WINDOW.PERSISTENT. La dimensione che sarà richiesta per l'archiviazione è valutata in byte (5 MB nel nostro caso).

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

Ora possiamo premere il pulsante CREATE FILE e l'avviso confermerà che abbiamo creato con successo il file.

Ora possiamo controllare di nuovo la cartella principale delle nostre app e possiamo trovare il nostro nuovo file lì.

Passaggio 4B - Funzione di scrittura del file

In questo passaggio, scriveremo del testo nel nostro file. Invieremo nuovamente una richiesta al file system, quindi creeremo il file writer per poter scrivereLorem Ipsum testo che abbiamo assegnato al file blob variabile.

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

Dopo aver premuto il pulsante WRITE FILE pulsante, l'avviso ci informerà che la scrittura è andata a buon fine come nello screenshot seguente.

Ora possiamo aprire log.txt e guarda quello Lorem Ipsum è scritto all'interno.

Passaggio 4C - Funzione di lettura del file

In questo passaggio, leggeremo il file log.txt e lo visualizzeremo nel file textareaelemento. Invieremo una richiesta al file system e otterremo l'oggetto file, quindi stiamo creandoreader. Quando il lettore viene caricato, assegneremo il valore restituito atextarea.

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

Quando facciamo clic sul file READ FILE pulsante, il testo del file verrà scritto all'interno textarea.

Passaggio 4D - Elimina funzione file

E infine creeremo la funzione per l'eliminazione log.txt file.

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

Ora possiamo premere il pulsante DELETE FILEpulsante per rimuovere il file dalla cartella principale delle app. L'avviso ci informerà che l'operazione di eliminazione è andata a buon fine.

Se controlliamo la cartella principale delle app, vedremo che è vuota.