javascript - HTML5文件读写同步

Question

我已设法设置代码以写入和读取文本文件。我遇到的问题是当我尝试在写入文件后读取文件时。它返回空值。我假设这是由于读取开始时写入未完成。如何让读取等待写入。

我的文件类

MyFile = function() {

};

MyFile.prototype.readFile = function(fileDir, fileName) {
    window.resolveLocalFileSystemURL(fileDir, function(dir) {
        dir.getFile(fileName, {create: true}, function(fileEntry) {
            fileEntry.file(function(file) {
                var reader = new FileReader();
                reader.onerror = function(evt) {
                    console.log("Reading " + file.name +  " Failed");
                };
                reader.onloadstart = function(evt) {
                    console.log("Read " + file.name +  " Starting");
                };
                reader.onload = function(evt) {
                    console.log("Read " + file.name +  " Successful");
                    window.localStorage.setItem(file.name + "Read", evt.target.result);
                    console.log(evt.target.result);
                };
                reader.onloadend = function(evt) {
                    console.log("Read " + file.name +  " Ending");
                };
                reader.readAsText(file);
            }, fail);
        }, fail);
    }, fail);
    var strText = window.localStorage.getItem(fileName + "Read");
    console.log(strText);
    window.localStorage.removeItem(fileName + "Read");
    return strText;
};


MyFile.prototype.overWriteFile = function(fileDir, fileName, strText) {
    window.resolveLocalFileSystemURL(fileDir, function(dir) {
        dir.getFile(fileName, {create: true}, function(file) {
            if (!file) {
                return;
            } else {
                console.log("Overwrite File Name: " + file.name);
            }
            file.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function(evt) {
                    if (fileWriter.length === 0) {
                        //fileWriter has been reset, write file
                        fileWriter.write(strText);
                    } else {
                        //file has been overwritten with blob
                        //use callback or resolve promise
                        console.log("Write " + file.name +  " Success");
                        console.log(strText);
                    }
                };
                fileWriter.truncate(0);
            }, fail);
        });
    });
};

调用写入和读取

 var myf = new MyFile();
 myf.overWriteFile("Directory", "test.txt","Test.txt Contents");
 console.log(myf.readFile("Directory", "test.txt"));

Answer 1

如果您不介意 jQuery，您可以尝试使用在文件写入完成时触发的自定义事件。

MyFile.prototype.overWriteFile = function(fileDir, fileName, strText) {
    //added self var to be accessed from within createWriter finished section
    var self = this

    window.resolveLocalFileSystemURL(fileDir, function(dir) {
        dir.getFile(fileName, {create: true}, function(file) {
            if (!file) {
                return;
            } else {
                console.log("Overwrite File Name: " + file.name);
            }
            file.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function(evt) {
                    if (fileWriter.length === 0) {
                        //fileWriter has been reset, write file
                        fileWriter.write(strText);
                    } else {
                        //file has been overwritten with blob
                        //use callback or resolve promise
                        //triggers the finishedMyFileWrite on the MyFile instance
                        jQuery(self).tigger('finishedMyFileWrite');
                        console.log("Write " + file.name +  " Success");
                        console.log(strText);
                    }
                };
                fileWriter.truncate(0);
            }, fail);
        });
    });
};

var myf = new MyFile();

jQuery(myf).on('finishedMyFileWrite', function finishedWrite(){
    console.log(this.readFile("Directory", "test.txt"));
});

myf.overWriteFile("Directory", "test.txt","Test.txt Contents");

我添加了一个 self 变量以允许自定义事件以 MyFile 的特定实例为目标，然后我在文件写入后触发一个名为 finishedMyFileWrite 的事件。 myf 对象设置为在写入之前监听此回调。我无法对此进行测试，因为我没有 cordova 模拟器，但该理论应该可行。