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.

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.

• javascript
• json
• internet-explorer
• load
• local

• 4 I don't think you can just open a file by path in pure client-side JS... since, otherwise, any site can browse client's HD (This is kinda scary.) After user browses a file on their hard drive, they've to POST that file back to the server-side, and your server-side can then render the JS on the page. You can do it without a page-refresh by posting it to an IFRAME, and then load the content from the IFRAME, but I don't know how you can get around w/o some server-side code to support this. – DashK Commented Feb 22, 2011 at 14:25
• 2 Instead of doing File I/O using Javascript, what if you utilize HTML5's local storage to store the JSON string? (Works on all "modern" browser...) – DashK Commented Feb 22, 2011 at 14:55
• I think local storage isn't ideal for my application. It will run like this: several PCs have all the files, and the JSON file will be distributed to each machine so they can load the file. This is a temporary solution while a server is being set up, but right now that's how I'm supposed to do it. :< – Endo Commented Feb 22, 2011 at 15:21
• That sucks. Well, hope your server'll be up soon! – DashK Commented Feb 23, 2011 at 1:01

3 Answers 3

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.

Well, I found a solution to 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.

Thank you all for your comments and answers; they've been very helpful and I've learned a lot.

Direct file system manipulation is something that is generally not allowed from client side javascript (with good reason. do you want random websites poking around in your files?))

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 should work in IE's starting with IE8. with older IE's you're 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