Кордова — Файловая система

Этот плагин используется для управления собственной файловой системой на устройстве пользователя.

Шаг 1 — Установка файлового плагина

Нам нужно запустить следующий код в командной строке, чтобы установить этот плагин.

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

Шаг 2 — Добавить кнопки

В этом примере мы покажем вам, как создать файл, записать в файл, прочитать его и удалить его. По этой причине мы создадим четыре кнопки в index.html . Мы также добавим текстовую область, в которой будет показано содержимое нашего файла.

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

Шаг 4А — Создать функцию файла

Файл будет создан в корневой папке приложения на устройстве. Чтобы иметь доступ к корневой папке, вам нужно предоставить суперпользовательский доступ к вашим папкам. В нашем случае путь к корневой папке — \ data \ data \ com.example.hello \ cache . На данный момент эта папка пуста.

Давайте теперь добавим функцию, которая создаст файл log.txt. Мы напишем этот код в index.js и отправим запрос в файловую систему. Этот метод использует WINDOW.TEMPORARY или WINDOW.PERSISTENT. Размер, который потребуется для хранения, оценивается в байтах (в нашем случае 5 МБ).

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

Теперь мы можем нажать кнопку CREATE FILE , и предупреждение подтвердит, что мы успешно создали файл.

Теперь мы можем снова проверить корневую папку наших приложений и найти наш новый файл там.

Шаг 4B — Функция записи файла

На этом этапе мы напишем некоторый текст в наш файл. Мы снова отправим запрос в файловую систему, а затем создадим средство записи файлов, чтобы иметь возможность записывать текст 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)
   }
}

После нажатия кнопки ЗАПИСЬ ФАЙЛА , предупреждение сообщит нам, что запись прошла успешно, как на следующем снимке экрана.

Теперь мы можем открыть log.txt и увидеть, что Lorem Ipsum написан внутри.

Шаг 4С — Функция чтения файла

На этом шаге мы прочитаем файл log.txt и отобразим его в элементе 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)
   }
}	

Когда мы нажимаем кнопку « ЧИТАТЬ ФАЙЛ» , текст из файла будет написан внутри текстовой области .

Шаг 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)
   }
}	

Теперь мы можем нажать кнопку УДАЛИТЬ ФАЙЛ , чтобы удалить файл из корневой папки приложений. Предупреждение сообщит нам, что операция удаления прошла успешно.

Если мы проверим корневую папку приложений, то увидим, что она пуста.