Использование файловой системы в Cordova

👁 152 просмотров

1. Добавление расширения к проекту

В первую очередь нам необходимо установить расширение для доступа к файловой системе устройства из официального репозитория https://github.com/apache/cordova-plugin-file или командой

#cordova plugin add cordova-plugin-file

2. Кнопки для тестирования

Добавим несколько кнопок для демонстрации работы с файловой системы и создадим кнопку создания, записи, чтения и удаления файла из директории кэша программы на устройства

...

<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. Добавление слушателей событий для кнопок

Для управления демонстрацией необходимо обработать события ранее созданных кнопок, когда устройство будет уже готово для полноценного использования и дальнейший полный код будет таким

<!DOCTYPE html>
<html>
  <head>
    <title>Device Ready Example</title>
  </head>
  <body>
        <!--Наши кнопки для управления процессом демонстрации-->
        <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>
  </body>
</html>

Скрипт реализуем в отдельном файле script.js, который будет подключаться к HTML-странице

document.addEventListener("DOMContentLoaded", function(event) { 
    // Ждем, пока API - библиотеки подгрузятся
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // Теперь API устройства доступны
    //
    function onDeviceReady() {
        //Теперь можно безопасно использовать API устрйоства
        
        //Ассоциирцем обработчики с кнопками
        document.getElementById("createFile").addEventListener("click", createFile);
        document.getElementById("writeFile").addEventListener("click", writeFile);
        document.getElementById("readFile").addEventListener("click", readFile);
        document.getElementById("removeFile").addEventListener("click", removeFile);
        
        //Обработчик кнопки создания файла
        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)
           }
        	
        }
	    
	    //Обработчик кнопки записи в файл
        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)
           }
        	
        }
        
        //Обработчик чтения файла
        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)
           }
        	
        }	
        
        //Обработчик удаления файла
        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)
           }
        	
        }	
    }
});

 

Ссылки

  1. Cordova — File System;
  2. deviceready Apache Cordova;
  3. Mirror of Apache Cordova Plugin file.