从 JavaScript >> IE/Firefox 打开/保存本地 (JSON) 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5079295/
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
Open/Save local (JSON) file from JavaScript >> IE/Firefox
提问by Endo
I'm very new to JS and I'm doing a small html page that -for now- will be ran locally. I have a string in JSON format which I need to be able to store/load as a file on the hard drive.
我对 JS 很陌生，我正在做一个小的 html 页面 - 现在 - 将在本地运行。我有一个 JSON 格式的字符串，我需要能够将它作为文件存储/加载到硬盘驱动器上。
To be able to store the string, I've got this to work on Firefox:
为了能够存储字符串，我让它在 Firefox 上工作：
function saveJSON() {
var obj = {name:'John', max:100};
window.open( "data:text/json;charset=utf-8," + escape(JSON.stringify(obj)))
}
However, it only works on FF, and I need to be able to do it with Internet Explorer also. I've read some stuff about using ActiveX, but I haven't found any example on how to do it.
但是，它仅适用于 FF，而且我还需要能够使用 Internet Explorer 执行此操作。我已经阅读了一些关于使用 ActiveX 的内容，但我还没有找到任何关于如何使用 ActiveX 的示例。
Should I try and use ActiveX, or is there a better HTML/JS way to save the file which works for both browsers?
我应该尝试使用 ActiveX，还是有更好的 HTML/JS 方法来保存适用于两种浏览器的文件？
The second problem is loading the JSON file. I've found that once loaded, I can turn it into a JSON var with JSON.parse. But I have no idea how to load a selected JSON file. I have an
第二个问题是加载 JSON 文件。我发现一旦加载，我可以使用 JSON.parse 将其转换为 JSON var。但我不知道如何加载选定的 JSON 文件。我有一个
<input type=file id="filePath">
to get the file path (though it returns different things in both browsers), and I would like to be able to do something like
获取文件路径（尽管它在两个浏览器中返回不同的东西），我希望能够做类似的事情
var a = loadFile(filePath.value)
Any suggestions on how to do it? I'm really stuck here and would greatly appreciate any help.
关于如何做到这一点的任何建议？我真的被困在这里，非常感谢任何帮助。
Thanks.
谢谢。
采纳答案by Endo
Well, I found a solutionto reading a client-side file which works pretty good. It's also not completely insecure since "direct and intentional user intervention is required to expose individual files to the script". Currently it works for me on Firefox only, so I guess I'll have to settle with this constraint for now.
好吧，我找到了一个读取客户端文件的解决方案，效果很好。它也并非完全不安全，因为“需要直接和有意的用户干预才能将单个文件暴露给脚本”。目前它只在 Firefox 上对我有效，所以我想我现在必须解决这个限制。
Thank you all for your comments and answers; they've been very helpful and I've learned a lot.
感谢大家的评论和回答；他们非常有帮助，我学到了很多。
回答by iivel
To load the file, it must already exist on the server. It can then be loaded as part of your script (either lazy loaded, or include in the head) - or loaded with the .load() method of the jQuery AJAX library. If it isn't on the server, you'll need to do an upload first [this is to prevent XSS].
要加载文件，它必须已经存在于服务器上。然后它可以作为脚本的一部分加载（延迟加载或包含在头部） - 或者使用 jQuery AJAX 库的 .load() 方法加载。如果它不在服务器上，您需要先上传 [这是为了防止 XSS]。
You can use the .load(), .get() or the full .ajax() jQuery calls to pull the data from that point. Look here: http://api.jquery.com/load/
您可以使用 .load()、.get() 或完整的 .ajax() jQuery 调用从该点提取数据。看这里：http: //api.jquery.com/load/
For the saving of data - use a cookie to store the data that way, post the data into a new window (form submission) or if you still want it in the querystring your method should work.
为了保存数据 - 使用 cookie 以这种方式存储数据，将数据发布到新窗口（表单提交），或者如果您仍然希望在查询字符串中使用它，您的方法应该可以工作。
Note I use a different JSON library but the below executes in both IE and FF.
注意我使用了不同的 JSON 库，但下面的内容在 IE 和 FF 中都可以执行。
$(document).ready(function() {
var obj = { name: 'John', max: 100 };
window.open("data:text/json;charset=utf-8," + escape($.toJSON(obj)))
})
I'd reccomend that to pass it you do something like:
我建议通过它你做这样的事情：
function saveJSON(){
var obj = {};
obj.name = 'John';
obj.max = 100;
$("#json").val($.toJSON(obj));
$("#hiddenForm").submit();
}
And a simple form to contain it...
和一个简单的形式来包含它......
<form action="somepageToDisplayFormFields.php" target="_blank" id="hiddenForm">
<input type="hidden" name="json" id="json" />
</form>
This will allow you to pass more (and more complex) objects across without running into URI size limitations, and cross browser functional differences. Plus trying to work out escape(), escapeURIComponent(), etc... will drive you nuts eventually.
这将允许您传递更多（和更复杂）的对象，而不会遇到 URI 大小限制和跨浏览器功能差异。再加上尝试使用 escape()、escapeURIComponent() 等......最终会让你发疯。
回答by Breton
Direct file system manipulation is something that is generally not allowed from client side javascript (with good reason. do youwant random websites poking around in yourfiles?))
直接文件系统操作是客户端 javascript 通常不允许的（有充分的理由。您希望随机网站在您的文件中闲逛吗？））
nevertheless, you can more or less accomplish your first goal just by making your JSON a download link- Put your DATA url into the href of a link and that shouldwork in IE's starting with IE8. with older IE's you're SOL.
尽管如此，您可以或多或少地通过使您的 JSON 成为下载链接来实现您的第一个目标 - 将您的 DATA url 放入链接的 href 中，这应该适用于从 IE8 开始的 IE。使用较旧的 IE，您就是 SOL。
As for getting a JSON file from a path, there is a PROPRIETARY, FIREFOX ONLY property that allows you to do this. documented here: https://developer.mozilla.org/en/DOM/File
至于从路径获取 JSON 文件，有一个 PROPRIETARY, FIREFOX ONLY 属性允许您执行此操作。此处记录：https: //developer.mozilla.org/en/DOM/File
