Javascript 可以使用 HTML5 本地存储来存储文件吗？如果不是，怎么办？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4940586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you use HTML5 local storage to store a file? If not, how?
提问by Matrym
How would one go about caching / managing many large files (videos) on a user's computer via browser mechanisms (plugins are acceptable solutions). From what I can tell, local storage is about database type data, not files.
如何通过浏览器机制（插件是可接受的解决方案）缓存/管理用户计算机上的许多大文件（视频）。据我所知，本地存储是关于数据库类型数据，而不是文件。
采纳答案by Derek Slager
The FileSystem API[1,2] was going to be your best bet going forward, at one point it was very much bleeding edge. However it has been been abandoned by w3c. From their own documentation:
FileSystem API[1,2] 将是你未来最好的选择，在某一点上它是非常前沿的。然而，它已被 w3c 放弃。从他们自己的文档：
Work on this document has been discontinued and it should not be referenced or used as a basis for implementation.
本文件的工作已停止，不应作为参考或用作实施的基础。
回答by acarlon
回答by Kevin
The answer to this question depends on your answers to the following questions:
这个问题的答案取决于您对以下问题的回答：
- Are you fine with the fact that support for writing files currently exists only in Chromium-based browsers (Chrome & Opera)?
- Are you fine with utilizing an as-of-now proprietary API to take advantage of such a capbility?
- Are you fine with the possibility of removal of said API in the future?
- Are you fine with the constriction of files created with said API to a sandbox(a location outside of which the files can produce no effect) on disk?
- Are you fine with the use of a virtual file system(a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser) to represent such files?
- 您是否同意目前仅在基于 Chromium 的浏览器（Chrome 和 Opera）中支持写入文件的事实？
- 您是否可以使用截至目前的专有 API 来利用这种能力？
- 将来是否有可能删除上述 API？
- 您是否可以将使用所述 API 创建的文件压缩到磁盘上的沙箱（文件无法产生任何影响的位置）？
- 您是否可以使用虚拟文件系统（一种目录结构，它不一定以与从浏览器中访问时的形式相同的形式存在于磁盘上）来表示此类文件？
If you answered "yes" to all of the above, then with the File, FileWriterand FileSystemAPIs, you can read and write files from the context of a browser tab/window using Javascript.
如果您对以上所有回答“是”，那么通过File、FileWriter和FileSystemAPI，您可以使用 Javascript 从浏览器选项卡/窗口的上下文中读取和写入文件。
Here are simple examples of how the APIs are used, directly and indirectly, in tandem to do these things:
以下是如何直接和间接使用 API 来执行这些操作的简单示例：
烘焙食品*
Write file:
写入文件：
//"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64; raw binary data can
//also be written with the use of Typed Arrays and the appropriate mime type
bakedGoods.set({
data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
Read file:
读取文件：
bakedGoods.get({
data: ["testFile"],
storageTypes: ["fileSystem"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(resultDataObj, byStorageTypeErrorObj){}
});
Using the raw File, FileWriter, and FileSystem APIs
使用原始 File、FileWriter 和 FileSystem API
Write file:
写入文件：
function onQuotaRequestSuccess(grantedQuota)
{
function saveFile(directoryEntry)
{
function createFileWriter(fileEntry)
{
function write(fileWriter)
{
//"SGVsbG8gd29ybGQh" is "Hello world!" encoded in Base64;
//raw binary data can also be written with the use of
//Typed Arrays and the appropriate mime type
var dataBlob = new Blob(["SGVsbG8gd29ybGQh"], {type: "text/plain"});
fileWriter.write(dataBlob);
}
fileEntry.createWriter(write);
}
directoryEntry.getFile(
"testFile",
{create: true, exclusive: true},
createFileWriter
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Read file:
读取文件：
function onQuotaRequestSuccess(grantedQuota)
{
function getfile(directoryEntry)
{
function readFile(fileEntry)
{
function read(file)
{
var fileReader = new FileReader();
fileReader.onload = function(){var fileData = fileReader.result};
fileReader.readAsText(file);
}
fileEntry.file(read);
}
directoryEntry.getFile(
"testFile",
{create: false},
readFile
);
}
requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}
var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);
Since you're also open to non-native (plug-in based) solutions, you can take advantage of file i/o enabled by Silverlight in IsolatedStorage, access to which is provided through Silverlight.
由于您也对非本机（基于插件）解决方案持开放态度，因此您可以利用由 Silverlight 启用的文件 I/O 在IndependentStorage 中，通过 Silverlight 提供访问。
IsolatedStorage is similar in many aspects to FileSystem, in particular it also exists in a sandbox and makes use of a virtual file system. However, managed codeis required to utilize this facility; a solution which requires writing such code is beyond the scope of this question.
隔离存储在很多方面都与文件系统相似，特别是它也存在于沙箱中并使用虚拟文件系统。但是，使用此功能需要托管代码；需要编写此类代码的解决方案超出了本问题的范围。
Of course, a solution which makes use of complementary managed code, leaving one with only Javascript to write, is well within the scope of this question ;) :
当然，一个使用互补托管代码的解决方案，只留下一个 Javascript 来编写，完全在这个问题的范围内；)：
//Write file to first of either FileSystem or IsolatedStorage
bakedGoods.set({
data: [{key: "testFile", value: "SGVsbG8gd29ybGQh", dataFormat: "text/plain"}],
storageTypes: ["fileSystem", "silverlight"],
options: {fileSystem:{storageType: Window.PERSISTENT}},
complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});
*BakedGoods is maintained by none other than this guy right here :)
* BakedGoods 是由这里的这个人维护的 :)
回答by deceze
HTML5 local storage is currently limited to 5MB by default in most implementations. I don't think you can store a lot of video in there.
在大多数实现中，HTML5 本地存储当前默认限制为 5MB。我认为您无法在其中存储大量视频。
Source: https://web.archive.org/web/20120714114208/http://diveintohtml5.info/storage.html
来源：https: //web.archive.org/web/20120714114208/http: //diveintohtml5.info/storage.html
回答by ruud van reede
Well most parts of html5 local storage are explained above.
上面解释了 html5 本地存储的大部分内容。
here https://stackoverflow.com/a/11272187/1460465there was a similar question, not about video's but if you can add a xml to local storage.
这里https://stackoverflow.com/a/11272187/1460465有一个类似的问题，不是关于视频的，但是否可以将 xml 添加到本地存储。
I mentioned a article in my answer in the article javascript is used to parse a xml to local storage and how to query it offline.
我在我的回答中提到了一篇文章 javascript 用于将 xml 解析到本地存储以及如何离线查询它。
Might help you.
可能会帮助你。
