Question

在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进行访问。

Answer 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

以下是上一个链接的代码片段（代码示例来自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);
};

对象库正在存储名为.png的{{1}}。它不一定是图像，它可以是blob，text，xml或者你想要它的任何其他东西。图像被映射到elephant.png

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

Javascript - 创建本地文件，稍后在Firefox中阅读

1 个答案: