从 JavaScript 打开/保存本地 (JSON) 文件 >> IE/Firefox答案

【问题标题】：Open/Save local (JSON) file from JavaScript >> IE/Firefox从 JavaScript 打开/保存本地 (JSON) 文件 >> IE/Firefox
【发布时间】：2011-02-22 14:19:45
【问题描述】：

我对 JS 非常陌生，我正在做一个小的 html 页面，目前该页面将在本地运行。我有一个 JSON 格式的字符串，我需要能够将它作为文件存储/加载到硬盘上。

为了能够存储字符串，我已经在 Firefox 上使用它：

function saveJSON() {
    var obj = {name:'John', max:100};
    window.open( "data:text/json;charset=utf-8," + escape(JSON.stringify(obj)))
}

但是，它只适用于 FF，而且我还需要能够使用 Internet Explorer 来做到这一点。我已经阅读了一些有关使用 ActiveX 的资料，但我没有找到任何有关如何使用的示例。

我应该尝试使用 ActiveX，还是有更好的 HTML/JS 方法来保存适用于两种浏览器的文件？

第二个问题是加载 JSON 文件。我发现一旦加载，我可以使用 JSON.parse 将其转换为 JSON var。但我不知道如何加载选定的 JSON 文件。我有一个

<input type=file id="filePath">

获取文件路径（尽管它在两个浏览器中返回不同的东西），我希望能够做类似的事情

var a = loadFile(filePath.value)

关于如何做的任何建议？我真的被困在这里，非常感谢任何帮助。

谢谢。

【问题讨论】：

我不认为你可以在纯客户端 JS 中通过路径打开文件......因为，否则，任何网站都可以浏览客户端的高清（这有点吓人。）用户浏览后在他们的硬盘驱动器上创建一个文件，他们必须将该文件发布回服务器端，然后您的服务器端可以在页面上呈现 JS。您可以通过将其发布到 IFRAME，然后从 IFRAME 加载内容，而无需刷新页面，但我不知道如何绕过一些服务器端代码来支持这一点。跨度>
不使用 Javascript 进行文件 I/O，如果您利用 HTML5 的本地存储来存储 JSON 字符串会怎样？（适用于所有“现代”浏览器...）
我认为本地存储不适合我的应用程序。它将像这样运行：几台 PC 拥有所有文件，并且 JSON 文件将分发到每台机器，以便它们可以加载文件。这是设置服务器时的临时解决方案，但现在我应该这样做。 :
这太糟糕了。嗯，希望你的服务器快点上线！

标签： javascript json internet-explorer load local

【解决方案1】：

要加载文件，它必须已经存在于服务器上。然后可以将它作为脚本的一部分加载（延迟加载或包含在头部中） - 或使用 jQuery AJAX 库的 .load() 方法加载。如果不在服务器上，则需要先上传[这是为了防止 XSS]。

您可以使用 .load()、.get() 或完整的 .ajax() jQuery 调用从该点提取数据。看这里：http://api.jquery.com/load/

为了保存数据 - 使用 cookie 以这种方式存储数据，将数据发布到新窗口（表单提交），或者如果您仍然希望它在查询字符串中，您的方法应该可以工作。

请注意，我使用了不同的 JSON 库，但以下内容在 IE 和 FF 中都执行。


  $(document).ready(function() {
    var obj = { name: 'John', max: 100 };
    window.open("data:text/json;charset=utf-8," + escape($.toJSON(obj))) 
  })

我建议通过它，您可以执行以下操作：


  function saveJSON(){
    var obj = {};
    obj.name = 'John';
    obj.max = 100;

    $("#json").val($.toJSON(obj));
    $("#hiddenForm").submit();
  }

还有一个简单的表格来包含它......

<form action="somepageToDisplayFormFields.php" target="_blank" id="hiddenForm">
  <input type="hidden" name="json" id="json" />
</form>

这将允许您传递更多（和更复杂）的对象，而不会遇到 URI 大小限制和跨浏览器功能差异。再加上尝试解决 escape()、escapeURIComponent() 等...最终会让你发疯。

【讨论】：

嘿iivel，现在文件将在本地运行，不涉及服务器。这些还有什么作用吗？
是的，您自己的本地文件系统可以正常工作 [不考虑跨站点]。不过，我会推荐一个测试本地网络服务器（这样您就可以使用相对路径名并具有良好的 HTTP 状态代码），例如 apache，或者您可以从 MSFT 在桌面上获得的任何免费版本。 --- 您发布到的文件需要读取表单/uri 变量并将它们转储到屏幕以保存。如果您更改文档类型，它应该会提示您下载或向您显示要保存的纯文本。

【解决方案2】：

好吧，我发现a solution 可以读取一个运行良好的客户端文件。它也不是完全不安全的，因为“需要直接和有意的用户干预才能将单个文件暴露给脚本”。目前它仅适用于 Firefox，所以我想我现在必须解决这个限制。

感谢大家的cmets和回答；他们非常有帮助，我学到了很多东西。

【讨论】：

【解决方案3】：

直接文件系统操作通常是不允许从客户端 javascript 进行的（有充分的理由。你是否希望随机网站在你的文件中四处游荡？））

尽管如此，您可以或多或少地通过将您的 JSON 设置为下载链接来实现您的第一个目标 - 将您的 DATA url 放入链接的 href 中，应该从 IE8 开始在 IE 中工作。使用较旧的 IE，您就是 SOL。

至于从路径获取 JSON 文件，有一个 PROPRIETARY, FIREFOX ONLY 属性允许您执行此操作。记录在这里：https://developer.mozilla.org/en/DOM/File

【讨论】：

该 API 没有任何专有信息。