overwrite a file with HTML5 FileWriter

问题

I'm using HTML5 FileWriter API to save the state of my webapp. I have bit of JS that periodically calls FileWriter.write to do that (so , over time, the write method is called several times). By default FileWriter API use an 'append' approach to writing files which does not suits my needs since I wan't to overwrite the file content.

I first tried this:

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

This is not working when you are writing a text shorter than the file content. I then tried this:

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

This code is supposed to clear the file and then write my new content but I'm getting the following error when write method is called:

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.

Odd thing: when I debug the code (with a breakpoint), the error does not occur, as if FileWriter.truncate was an asynchronous method...

I am stuck here, any ideas?

I am using Chrome 30.0.1599.69

回答1:

Here is a correct code that won't waste 500ms on waiting

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

回答2:

You can truncate and then write with two different FileWriter objects.

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

回答3:

If you want to always override it, you can use this method

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

回答4:

A workaround is the following code:

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

This simply wait 500 milliseconds before writing. Not great but it works...

回答5:

This is the simplest way how i use to delete the content of a file with syncFileSystem in my Chrome App.

Two createWriter, the first one truncates then the second one overwrites with nothing (you can change with your new value) :

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

});

来源：https://stackoverflow.com/questions/19426698/overwrite-a-file-with-html5-filewriter

标签

javascript

html5

chromium

fileapi