Open/Save local (JSON) file from JavaScript >> IE/Firefox

Question

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.

To be able to store the string, I've got this to work on 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.

Should I try and use ActiveX, or is there a better HTML/JS way to save the file which works for both browsers?

---

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

<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.

Answer 1

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].

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/

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.

Note I use a different JSON library but the below executes in both IE and 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.