The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Accessing Device Storage

Next ►
►

In this section, we will explore how to access and manipulate device storage using Apache Cordova. This is a crucial feature for many mobile applications that need to store data locally on the device.

Key Concepts

  1. File System API: Cordova provides a File System API that allows you to read, write, and navigate the file system on the device.
  2. File Plugin: To use the File System API, you need to install the Cordova File Plugin.
  3. Directories and Files: Understanding how to create, read, and write directories and files.
  4. Permissions: Managing permissions to access the file system.

Installing the Cordova File Plugin

Before you can use the File System API, you need to install the Cordova File Plugin. You can do this using the Cordova CLI:

cordova plugin add cordova-plugin-file

Basic File Operations

  1. Requesting a File System

To start working with the file system, you need to request access to it. Cordova provides two types of file systems: LocalFileSystem.PERSISTENT and LocalFileSystem.TEMPORARY.

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);
}, false);

function onFileSystemSuccess(fileSystem) {
    console.log("File system name: " + fileSystem.name);
    console.log("Root directory name: " + fileSystem.root.name);
}

function onError(error) {
    console.log("Error: " + error.code);
}

  1. Creating and Writing to a File

Once you have access to the file system, you can create and write to a file.

function onFileSystemSuccess(fileSystem) {
    fileSystem.root.getFile("example.txt", { create: true, exclusive: false }, onFileEntrySuccess, onError);
}

function onFileEntrySuccess(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
        fileWriter.onwriteend = function() {
            console.log("File written successfully.");
        };

        fileWriter.onerror = function(e) {
            console.log("Write failed: " + e.toString());
        };

        var dataObj = new Blob(['Hello, world!'], { type: 'text/plain' });
        fileWriter.write(dataObj);
    }, onError);
}

  1. Reading from a File

To read from a file, you need to get a FileEntry object and then use a FileReader.

function onFileSystemSuccess(fileSystem) {
    fileSystem.root.getFile("example.txt", { create: false, exclusive: false }, onFileEntrySuccess, onError);
}

function onFileEntrySuccess(fileEntry) {
    fileEntry.file(function(file) {
        var reader = new FileReader();

        reader.onloadend = function() {
            console.log("File read successfully.");
            console.log("File content: " + this.result);
        };

        reader.readAsText(file);
    }, onError);
}

  1. Deleting a File

To delete a file, you can use the remove method on a FileEntry object.

function onFileSystemSuccess(fileSystem) {
    fileSystem.root.getFile("example.txt", { create: false, exclusive: false }, function(fileEntry) {
        fileEntry.remove(function() {
            console.log("File removed successfully.");
        }, onError);
    }, onError);
}

Practical Exercise

Exercise: Create, Write, Read, and Delete a File

  1. Objective: Create a file named test.txt, write "Cordova File API" to it, read the content, and then delete the file.
  2. Steps:
    • Request the file system.
    • Create and write to test.txt.
    • Read the content of test.txt.
    • Delete test.txt.

Solution

document.addEventListener('deviceready', function() {
    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFileSystemSuccess, onError);
}, false);

function onFileSystemSuccess(fileSystem) {
    fileSystem.root.getFile("test.txt", { create: true, exclusive: false }, function(fileEntry) {
        // Write to the file
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.onwriteend = function() {
                console.log("File written successfully.");

                // Read the file
                fileEntry.file(function(file) {
                    var reader = new FileReader();

                    reader.onloadend = function() {
                        console.log("File read successfully.");
                        console.log("File content: " + this.result);

                        // Delete the file
                        fileEntry.remove(function() {
                            console.log("File removed successfully.");
                        }, onError);
                    };

                    reader.readAsText(file);
                }, onError);
            };

            fileWriter.onerror = function(e) {
                console.log("Write failed: " + e.toString());
            };

            var dataObj = new Blob(['Cordova File API'], { type: 'text/plain' });
            fileWriter.write(dataObj);
        }, onError);
    }, onError);
}

function onError(error) {
    console.log("Error: " + error.code);
}

Common Mistakes and Tips

  • Permissions: Ensure that your app has the necessary permissions to access the file system, especially on Android and iOS.
  • Error Handling: Always include error handling to manage potential issues like permission denials or file not found errors.
  • File Paths: Be cautious with file paths and ensure they are correctly specified.

Conclusion

In this section, we covered the basics of accessing device storage using Apache Cordova. You learned how to install the Cordova File Plugin, request a file system, create and write to files, read from files, and delete files. These skills are fundamental for building mobile applications that require local data storage. In the next section, we will explore handling network information using Cordova.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved