Write to a local JSON file from the browser

Question

I'm trying to write to my local JSON file with javascript, I'm getting it from my HTML, changing it and want to write it back. I found how to read it from here but didn't find how to write to it back to the json file.

Note: I want to this without Node.js , 'fs' won't help..

My code to get the JSON file:

<script type="text/javascript" src="data.json></script>
<script type="text/javascript" src="javascrip.js"></script>

var mydata = JSON.parse(data);

Then I changed the value of the 'name', for example.

mydata["name"] = "NewName";

And then I want to send it back to the json file, update it.

I didn't really find any code to do so.

How you are getting? To where exactly you want to send it? Where is the code you use to get and the code that you tried? — Calvin Nunes, May 15 '18 at 19:42

score 4 · Answer 1 · answered May 15 '18 at 20:28

While you can't directly write to the file system due because of security constraints, you can trigger a save dialog to request the user to save the file. I use this function which works on all recent releases of the major browsers.

function download(data, filename) {
    // data is the string type, that contains the contents of the file.
    // filename is the default file name, some browsers allow the user to change this during the save dialog.

    // Note that we use octet/stream as the mimetype
    // this is to prevent some browsers from displaying the 
    // contents in another browser tab instead of downloading the file
    var blob = new Blob([data], {type:'octet/stream'});

    //IE 10+
    if (window.navigator.msSaveBlob) {
        window.navigator.msSaveBlob(blob, filename);
    }
    else {
        //Everything else
        var url = window.URL.createObjectURL(blob);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.href = url;
        a.download = filename;

        setTimeout(() => {
            //setTimeout hack is required for older versions of Safari

            a.click();

            //Cleanup
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
        }, 1);
    }
}

It is also worth mentioning that HTML5 spec has a download attribute, but it isn't currently supported on IE.

score 3 · Answer 2 · answered May 15 '18 at 19:44

3

You can't write to file system due to security constraints of the browser.

You can do that only this way - https://stackoverflow.com/a/30800715/6149665

answered May 15 '18 at 19:44

ArtemSky

1,173
11
20

Thanks for the dupe suggestion but this should probably should be a comment. – ggorlen Jul 22 '22 at 14:21

score 3 · Accepted Answer · answered May 15 '18 at 19:54

As ArtemSky said, You can't write to the local file system. The way to accomplish what you want to do would be to use a server that can write to it's local file system or a database or whatever.

So you would want to have the data stored somewhere, either a local file on the server, in the cloud, etc. or a database of some sort. Then you would set up an API on the server that you could call remotely to get the data via an XMLHttpRequest(XHR)

Then you would create another API method you can use to send the data back and then call that with the updated/new data.

Writing to the local file system is a security concern because if anyone who can write code could overwrite your system files otherwise. Preventing the ability to write to the local file system is the only way to make the web safe.

You can also write to [LocalStorage](https://developer.mozilla.org/docs/Web/API/Storage/LocalStorage) if that's appropriate. — Stephen P, May 15 '18 at 20:34

Write to a local JSON file from the browser

3 Answers3