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

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()等问题......最终会让你疯狂.

Answer 2

好吧，我找到了一个读取客户端文件的解决方案，效果非常好。它也不是完全不安全，因为“需要直接和有意的用户干预才能将单个文件暴露给脚本”。目前它仅适用于我在 Firefox 上，所以我想我现在必须解决这个限制。

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