用 HTML5 FileWriter 覆盖文件答案

【问题标题】：overwrite a file with HTML5 FileWriter用 HTML5 FileWriter 覆盖文件
【发布时间】：2013-10-25 22:36:08
【问题描述】：

我正在使用HTML5 FileWriter API 来保存我的网络应用程序的状态。我有一些 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

【问题讨论】：

标签： javascript html chromium fileapi

【解决方案1】：

解决方法是以下代码：

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

这只是在写入前等待 500 毫秒。不是很好，但它有效......

【讨论】：

【解决方案2】：

这是一个不会浪费 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);

【讨论】：

您能详细说明一下吗？什么是“d”？
@htulipe，这是我在外部使用的 jQuery.Deffered 对象，以便在截断和写入完成时收到通知。编写完成后，您可以忽略它或添加您想要执行的任何其他代码。
@htulipe 请将其标记为答案，如果它解决了问题。
检测到无限循环

【解决方案3】：

您可以截断然后用两个不同的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);

【讨论】：

【解决方案4】：

如果你想总是覆盖它，你可以使用这个方法

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

【讨论】：

【解决方案5】：

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

两个 createWriter，第一个截断，然后第二个不覆盖任何内容（您可以使用新值进行更改）：

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

});

【讨论】：