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

Question

我是 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)

有什么建议吗？我真的被困在这里，非常感谢任何帮助。

谢谢。

Answer 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() 等……最终会让您抓狂。