Javascript - 创建本地文件，稍后在 Firefox 中读取答案

【问题标题】：Javascript - create local file, and read it later, in FirefoxJavascript - 创建本地文件，稍后在 Firefox 中读取
【发布时间】：2014-03-05 22:19:06
【问题描述】：

在 Chrome 中，我可以使用 FileSystem API 在本地创建文件并稍后读取，如下所示：

// Access file system:
window.webkitRequestFileSystem(window.TEMPORARY, 1024*1024, save);

// Save:
function save(localstorage) {
  localstorage.root.getFile("hello.txt", {create: true}, function(my_writer) {
    my_writer.createWriter(function(my_content) {
      var blob = new Blob(["Hello World"], {type: "text/plain"});
      my_content.write(blob);
    });
  });
}

然后我可以使用 html 标记的 SRC 或 HREF 属性访问该文件：

<a href="filesystem:http://www.example.com/temporary/hello.txt">Click to view</a>

什么是 Firefox 相当于执行上述操作？我需要能够在 Firefox 中执行此操作，包括以后可以使用 SRC 或 HREF 访问的部分。 HTML5 本地存储无法解决问题，因为它仅将文本数据存储在键值对中，这无法让我使用 SRC 或 HREF 进行访问。

【问题讨论】：

我相信您将需要使用 IDBObjectStore API。虽然我不确定所需的确切代码。
谢谢，但我认为这行不通；我实际上需要能够通过 html 标记的 SRC 或 HREF 属性中的文件名访问文件。我将编辑我的帖子以指定这一点。

标签： javascript firefox html5-filesystem

【解决方案1】：

不幸的是，Firefox 可能不会很快实现 HTML5 文件系统 API mozilla's opinion on local storage, as well as the IndexedDB

但是，我认为您有几个选择（主要是由于 HTML5 IndexedDB） - 尽管可能还有更多选择。

第一个选项是使用 HTML5 IndexedDB。如需具体代码/教程，请查看this link for an intro and demo to the IndexedDB

以下是来自上一个链接的代码的 sn-p（代码示例归功于 Robert Nymen），我认为它可以使您的请求成为可能 - 它不一定必须使用 IndexedDB 完成，但与 IndexedDB 结合可以为您提供Chrome 和文件系统 API 的目标功能。

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;
console.log("Got elephant!" + imgFile);

// Get window.URL object
var URL = window.URL || window.webkitURL;

// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);

// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);

// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};

对象存储正在存储一个名为 elephant.png 的 .png。它不一定是图像，它可以是 blob、文本、xml 或任何其他你想要的东西。图片被映射到domain/page/indexeddb/elephant.png

第二个选项，您可能会使用这个环绕 HTML5 file-system API plugin（我说可能，因为它适用于 IndexedDB 为您提供 HTML5 文件系统 API 功能，以及前面的示例和第一个链接显示您可以使用 IndexedDB 来获得所需的功能）

【讨论】：