谷歌浏览器扩展程序在客户端保存文件

Question

所以基本上发生了什么：
1）点击按钮
2）外部请求返回json arrya
3）遍历数组并将每个元素保存在文件中（客户端）

问题是console.log(fileName)仅打印最后一个元素。 所以我得到的是最后一个文件名的n倍。

有没有办法欺骗window.webkitRequestFileSystem来执行我需要的操作，或者有解决方法。

document.getElementById("reload-files").onclick = function() {
    reloadFiles(localStorage["user_mail"]);
}

function reloadFiles (email) {
  var files = [];
  var xhr    = new XMLHttpRequest();

  var url = "...url...&email="+escape(email);
  xhr.open("GET", url, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      resp = JSON.parse(xhr.responseText);

      for (var i = resp.length - 1; i >= 0; i--) {
        fileName = resp[i].name;
        fileData  = resp[i].data;
        files.push(fileName);
        // save file
        window.webkitRequestFileSystem(window.PERSISTENT, resp[i].data.length, writeToFileStorage, errorHandler);
      };
      localStorage["files"] = JSON.stringify(files);
    }
  }
  xhr.send();
}

function writeToFileStorage(fs) {
  fs.root.getFile(fileName, {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log(fileName);
      };

      var blob = new Blob([fileData], {type: 'application/javascript'});

      fileWriter.write(blob);

    }, errorHandler);

  }, errorHandler);
}

Answer 1

您的问题是webkitRequestFileSystem不会立即调用其回调函数。 相反，它会在当前代码完成执行之后的稍后时间触发。 因此，您生成了一个writeToFileStorage执行的待办事项，所有这些都读取了for循环完成后剩下的最终fileName值。

您可以使用bind解决此问题，该方法将生成带有固定参数的回调函数的新副本：

window.webkitRequestFileSystem(window.PERSISTENT,
                               resp[i].data.length,
                               writeToFileStorage.bind(window, fileName, fileData),
                               errorHandler);

然后将这些形式参数放在您的回调定义之前，并使fs为最终参数：

function writeToFileStorage(fileName, fileData, fs) {
    ...
}

就是说，我质疑重复请求文件系统访问的效率。 您可以将所有data.length数量相加，然后一次调用webkitRequestFileSystem 。 您可以在回调内部添加更多for循环，然后仅调用一次回调。