Cordova - 文件系统

Cordova - 文件系统访问

cordova-plugin-file 允许您的应用读写设备的本地文件系统。这对于保存用户生成的内容、缓存数据或离线管理应用资源等任务至关重要。

注意：直接访问文件系统涉及平台特定的路径和权限。该插件抽象了许多这些复杂性，提供了标准的目录位置。

步骤 1 - 安装文件插件

使用终端或命令行向项目添加插件：

cordova plugin add cordova-plugin-file

步骤 2 - 文件操作的 UI 元素（示例）

在 index.html 中，我们将添加用于常见文件操作的按钮和一个用于显示文件内容的 textarea。

<!-- In index.html -->
<button id="createAppFileButton">Create File</button>
<button id="writeFileButton">Write to File</button>
<button id="readFileButton">Read File</button>
<button id="removeFileButton">Delete File</button>
<br><br>
<textarea id="fileContentArea" rows="5" cols="40" placeholder="File content will appear here..."></textarea>

步骤 3 - 添加事件监听器

在 deviceready 事件之后，在 index.js 中设置事件监听器。

// In index.js, after 'deviceready'
document.addEventListener('deviceready', () => {
    document.getElementById("createAppFileButton").addEventListener("click", createAppFile);
    document.getElementById("writeFileButton").addEventListener("click", writeToFile);
    document.getElementById("readFileButton").addEventListener("click", readAppFile);
    document.getElementById("removeFileButton").addEventListener("click", removeAppFile);
    // Initialize file system access details on device ready
    console.log('cordova.file.dataDirectory: ' + cordova.file.dataDirectory);
    console.log('cordova.file.cacheDirectory: ' + cordova.file.cacheDirectory);
}, false);

cordova-plugin-file 提供了几个预定义的目录路径（例如，cordova.file.dataDirectory，cordova.file.cacheDirectory）。我们将使用 cordova.file.dataDirectory 来存放持久的应用特定文件。

步骤 4 - 实现文件操作函数

文件操作的核心是获取所选目录的 DirectoryEntry，然后使用其方法获取或创建 FileEntry 对象，随后获取 FileWriter 或 FileReader 对象。

A. 创建文件函数 (createAppFile)

此函数在应用的 data 目录中创建一个名为 mylog.txt 的新空文件。

const fileName = "mylog.txt";

function createAppFile() {
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dirEntry) {
        console.log('File system resolved: ' + dirEntry.name);
        dirEntry.getFile(fileName, { create: true, exclusive: true }, function (fileEntry) {
            console.log(fileName + ' created successfully at: ' + fileEntry.toURL());
            alert('File created: ' + fileName);
        }, onErrorCreateFile);
    }, onErrorResolveFS);
}

function onErrorCreateFile(error) {
    console.error('Error creating file: ' + error.code);
    if (error.code === FileError.PATH_EXISTS_ERR || error.code === 12) { // PATH_EXISTS_ERR is 12
        alert('File already exists.');
    } else {
        alert('Error creating file: ' + error.code);
    }
}

function onErrorResolveFS(error) {
    console.error('Error resolving file system: ' + error.code);
    alert('Error resolving file system: ' + error.code);
}

按下 CREATE FILE 时，如果 mylog.txt 不存在，它将被创建。一个弹窗将确认成功，或者在文件已存在时给出提示（由于设置了 exclusive: true）。

B. 写入文件函数 (writeToFile)

此函数将文本内容写入 mylog.txt。如果文件不存在，它将被创建。

function writeToFile() {
    const textToWrite = "Hello World! Writing to file at " + new Date().toLocaleTimeString();
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (dirEntry) {
        dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
            fileEntry.createWriter(function (fileWriter) {
                fileWriter.onwriteend = function() {
                    console.log(fileName + ' write completed.');
                    alert('Content written to ' + fileName);
                    // Optionally, read and display content after writing
                    // readAppFile();
                };
                fileWriter.onerror = function (e) {
                    console.error('Write failed: ' + e.toString());
                    alert('Write failed: ' + e.toString());
                };
                const dataObj = new Blob([textToWrite], { type: 'text/plain' });
                fileWriter.write(dataObj);
            }, onErrorCreateWriter);
        }, onErrorGetFile);
    }, onErrorResolveFS);
}

function onErrorCreateWriter(error) {
    console.error('Error creating file writer: ' + error.code);
    alert('Error creating file writer: ' + error.code);
}

function onErrorGetFile(error) {
    console.error('Error getting file: ' + error.code);
    alert('Error getting file: ' + error.code);
}

按下 WRITE TO FILE 将会写入或覆盖 mylog.txt，内容为示例文本。

C. 读取文件函数 (readAppFile)

此函数读取 mylog.txt 的内容并将其显示在 textarea 中。

function readAppFile() {
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory + fileName, function (fileEntry) {
        fileEntry.file(function (file) {
            const reader = new FileReader();
            reader.onloadend = function() {
                console.log("Successful file read: " + this.result);
                document.getElementById('fileContentArea').value = this.result;
                alert('File content loaded.');
            };
            reader.onerror = function(e) {
                console.error('Failed file read: ' + e.toString());
                alert('Failed file read: ' + e.toString());
            };
            reader.readAsText(file);
        }, onErrorReadFile);
    }, onErrorResolveFileForRead);
}

function onErrorReadFile(error) {
    console.error('Error reading file object: ' + error.code);
    alert('Error reading file object: ' + error.code);
}

function onErrorResolveFileForRead(error) {
    console.error('Error resolving file for reading: ' + error.code + '. Does the file exist?');
    alert('Error resolving file: ' + error.code + '. Ensure file exists.');
    document.getElementById('fileContentArea').value = 'File not found or unreadable.';
}

点击 READ FILE 将尝试加载并显示 mylog.txt 的内容。

D. 删除文件函数 (removeAppFile)

此函数从应用的 data 目录中删除 mylog.txt。

function removeAppFile() {
    window.resolveLocalFileSystemURL(cordova.file.dataDirectory + fileName, function (fileEntry) {
        fileEntry.remove(function () {
            console.log(fileName + ' removed successfully.');
            alert('File removed: ' + fileName);
            document.getElementById('fileContentArea').value = ''; // Clear textarea
        }, onErrorRemoveFile);
    }, onErrorResolveFileForRemove);
}

function onErrorRemoveFile(error) {
    console.error('Error removing file: ' + error.code);
    alert('Error removing file: ' + error.code);
}

function onErrorResolveFileForRemove(error) {
    console.error('Error resolving file for removal: ' + error.code + '. Does the file exist?');
    alert('Error resolving file for removal: ' + error.code + '. Ensure file exists.');
}

按下 DELETE FILE 将会删除 mylog.txt。此后，在文件重新创建之前，任何读取操作都将失败。

重要注意事项和最佳实践

请查阅官方的 cordova-plugin-file 文档以获取完整的 API 参考和平台特定细节。