javascript - 从浏览器写入本地 JSON 文件

Question

这个问题已经有答案了:

Download JSON object as a file from browser (15 个回答)

已关闭 去年。

我正在尝试使用 javascript 写入本地 JSON 文件，我从 HTML 中获取它，更改它并想将其写回。我找到了如何从 here 读取它但没有找到如何将其写回json文件。

注意:我想在没有 Node.js 的情况下做到这一点，“fs”不会有帮助..

我的获取 JSON 文件的代码:

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

var mydata = JSON.parse(data);

例如，然后我更改了“名称”的值。

mydata["name"] = "NewName";

然后我想将其发送回json文件，更新它。

我确实没有找到任何代码来执行此操作。

Answer 1

虽然由于安全限制，您无法直接写入文件系统，但您可以触发保存对话框来请求用户保存文件。我使用的这个函数适用于所有最新版本的主要浏览器。

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);
    }
}

还值得一提的是，HTML5 规范具有 download 属性，但 IE 目前不支持该属性。