用HTML5 FileWriter覆盖一个文件

Question

我正在使用HTML5 FileWriter API保存我的Web应用程序的状态。我有一些JS定期调用FileWriter.write来实现这一点（因此，随着时间的推移，write方法被多次调用）。默认情况下，FileWriter API使用“追加”方法来写入文件，这不适合我的需求，因为我想要覆盖文件内容。

我首先尝试了这个：

this._writer.seek(0);
this._writer.write(content);

当您编写的文本短于文件内容时，此方法无法正常工作。我尝试了以下方法：

this._writer.truncate(0);
this._writer.write(content);

这段代码的本意是清空文件并写入新内容，但当调用write方法时出现了以下错误：

Uncaught InvalidStateError: An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk.

奇怪的事情是：当我使用断点调试代码时，错误不会发生，就好像 FileWriter.truncate 是一个异步方法一样...

我卡在这里了，有什么想法吗？

我正在使用 Chrome 30.0.1599.69

- htulipe

Answer 1

这里有一段正确的代码，不会浪费500毫秒等待。

fileWriter.onwriteend = function() {
    if (fileWriter.length === 0) {
        //fileWriter has been reset, write file
        fileWriter.write(blob);
    } else {
        //file has been overwritten with blob
        //use callback or resolve promise
    }
};
fileWriter.truncate(0);

- Ivan Nikitin

---

你能详细说明一下吗？"d"是什么？ - htulipe

@htulipe，这是我使用的jQuery.Deferred对象，用于在截断和写入完成时向外部通知。您可以忽略它或添加任何其他代码以在写入完成时执行。 - Ivan Nikitin

@htulipe 如果这个解决了问题，请将其标记为答案。 - Ivan Nikitin

检测到无限循环。 - ColacX

Answer 2

您可以使用两个不同的FileWriter对象进行截断和写入操作。

fileEntry.createWriter(function (fileWriter) {

        fileWriter.truncate(0);

    }, errorHandler);

fileEntry.createWriter(function (fileWriter) {

        var blob = new Blob(["New text"], { type: 'text/plain' });

        fileWriter.write(blob);

    }, errorHandler);

- okh

Answer 3

如果您希望始终覆盖它，可以使用此方法。

function save(path,data){
    window.resolveLocalFileSystemURL(dataDirectory, function(dir){
        dir.getFile(path, {create:true}, function(file){
            file.createWriter(function(fileWriter){
                fileWriter.seek(0);
                fileWriter.truncate(0);
                var blob = new Blob([data], {type:'text/plain'});
                fileWriter.write(blob);
            }, function(e){
                console.log(e);
            });
        });
    });
};

- user1698821

Answer 4

这是我在我的Chrome应用中使用syncFileSystem删除文件内容的最简单方法：

创建两个writer，第一个截断，第二个覆盖为空（您可以更改为新值）：

file.createWriter((fileWriter)=>fileWriter.truncate(0));

file.createWriter((fileWriter)=> {

  fileWriter.onwriteend = function() {
    console.log('New Actions!');
  };

  var blob = new Blob([''], {type: 'text/plain'});
  fileWriter.write(blob);

});

- Alexandre Lorret

Answer 5

一个解决方法是使用以下代码：

this._writer.truncate(0);
window.setTimeout(function(){
    this._writer.write(content);
}.bind(this),500)

这个代码会在写入之前等待500毫秒。虽然不是很好，但它是有效的...

- htulipe