javascript - 如何在文件 : protocol 处使用 webkitRequestFileSystem

Question

根据 Exploring the FileSystem APIs在

Browser support & storage limitations

You may need the --allow-file-access-from-files flag if you're debugging your app from file://. Not using these flags will result in a SECURITY_ERR or QUOTA_EXCEEDED_ERR FileError.

使用 --allow-file-access-from-files 启动了 Chrome , --unlimited-storage并且可能已弃用 --unlimited-quota-for-files ;还有--unsafely-treat-insecure-origin-as-secure=file:///path/to/directory/*与 --user-data-dir=/path/to/directory设置。

有趣的是，当 chromium 打开时会显示一个通知

You are using an unsupported command-line flag: --unsafely-treat-insecure-origin-as-secure. Stability and security will suffer.

还有其他未指定的标志可以使用；忽略通知，因为仍然能够设置和获取 localStorage在file:协议(protocol)，具体文件位于 file:///path/to/directory/* , 虽然

navigator.webkitTemporaryStorage.requestQuota(1024*1024, function(grantedBytes) {
  console.log(grantedBytes)
}, errorHandler);

已记录 0 , 其中errorHandler是

function errorHandler(e) {
  console.log(e)
}

还有

function writeFile(fs) {
  fs.root.getFile("file.txt", {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
        // call `readFile`
        window.requestFileSystem(window.TEMPORARY, 1024*1024, readFile, errorHandler);
      };
      fileWriter.onerror = errorHandler;
      var blob = new Blob(["abc"], {type: "text/plain"});
      fileWriter.write(blob);
    }, errorHandler);
  }, errorHandler);
}

window.requestFileSystem(window.TEMPORARY, 1024*1024, writeFile, errorHandler);

function readFile(fs) {
  fs.root.getFile("file.txt", {}, function(fileEntry) {
    fileEntry.file(function(file) {
       var reader = new FileReader();
       reader.onloadend = function(e) {
         console.log(e.target.result)
       };
       reader.readAsText(file);
    }, errorHandler);
  }, errorHandler);
}

记录

FileError {code: 7, name: "InvalidStateError", message: "An operation that depends on state cached in an in…he state had changed since it was read from disk."}
code:7
message:"An operation that depends on state cached in an interface object was made but the state had changed since it was read from disk."
name:"InvalidStateError"
__proto__:DOMError

问题:启动标志、解决方法或其他允许使用 webkitRequestFileSystem 的方法需要进行哪些修改？在file:协议(protocol)？

Answer 1

初始尝试在 terminal 收到与设备空间不足相关的错误。收到两个单独的错误 code 7 InvalidStateError 和 code 3 AbortError。请注意，Chromium 是在每个配置的沙箱中启动的。

通过将启动标志调整为 --allow-file-access-from-files，能够在 file: 协议(protocol)中实现写入 FileSystem 的预期结果 并在 --user-data-dir=/newer/version/of/profile/folder 指定不同的 chromium 配置文件夹； --unlimited-quota-for-files 和 --unsafely-treat-insecure-origin-as-secure=file:///path/to/directory/*不需要达到要求。

不完全确定为什么原始配置文件文件夹在尝试访问 file: 协议(protocol)中的 FileSystem 时使用记录的错误。该文件夹可能来自以前版本的 Chrome 。通常从命令行启动新版本或最新版本的 Chromium，其中配置目录中的 chromium 文件夹可能是已设置首选项的旧版本。当查看 终端 时，在使用以前的配置文件配置文件夹启动时，no space left on disk 消息被记录为与 FileSystem 相关。尝试了解决问题的较新版本的 Chrome 配置文件文件夹。

解决方案的大部分功劳归功于@PatrickEvans，他验证了该过程确实可行；很可能是用户错误限制了预期结果的实现。

var requestedBytes = 16,
  _grantedBytes;

function errorHandler(e) {
  console.log(e)
}

function writeFile(fs) {
  console.log(fs)
  fs.root.getFile("file.txt", {
    create: true
  }, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      fileWriter.onwriteend = function(e) {
        // call `readFile`
        console.log(_grantedBytes);
        window.webkitRequestFileSystem(window.TEMPORARY
                                      , _grantedBytes
                                      , readFile
                                      , errorHandler);
      };
      fileWriter.onerror = errorHandler;
      var blob = new Blob(["abc"], {
        type: "text/plain"
      });
      fileWriter.write(blob);
    }, errorHandler);
  }, errorHandler);
}

navigator.webkitTemporaryStorage.requestQuota(requestedBytes
, function(grantedBytes) {
    console.log(grantedBytes);
    _grantedBytes = grantedBytes;
    window.webkitRequestFileSystem(window.TEMPORARY
                                  , grantedBytes
                                  , writeFile
                                  , errorHandler);

}, errorHandler);

function readFile(fs) {
  fs.root.getFile("file.txt", {}, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function(e) {
        console.log(e.target.result, fileEntry.toURL());
      };
      reader.readAsText(file);
    }, errorHandler);
  }, errorHandler);
}