从浏览器写入本地 JSON 文件

Question

我正在尝试使用 javascript 写入我的本地 JSON 文件，我从我的 HTML 中获取它，更改它并想将其写回。我找到了如何从 这里 读取它，但没有找到如何将它写回 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 文件，更新它。

我真的没有找到任何代码来这样做。

原文由 Nikita Ivanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 ArtemSky 所说，您无法写入本地文件系统。完成您想要做的事情的方法是使用可以写入其本地文件系统或数据库或其他任何内容的服务器。

因此，您可能希望将数据存储在某个地方，可以是服务器上的本地文件、云中等，也可以是某种数据库。然后您将在服务器上设置一个 API，您可以远程调用该 API 以通过 XMLHttpRequest(XHR) 获取数据

然后您将创建另一个 API 方法，您可以使用它来发回数据，然后使用更新/新数据调用它。

写入本地文件系统是一个安全问题，因为如果可以编写代码的任何人都可以否则覆盖您的系统文件。阻止写入本地文件系统的能力是确保网络安全的唯一方法。

原文由 Jonathan Rys 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

由于安全限制，您不能直接写入文件系统，但您可以触发保存对话框以请求用户保存文件。我使用此功能适用于所有最新版本的主要浏览器。

 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 不支持它。

原文由 Norman Breau 发布，翻译遵循 CC BY-SA 4.0 许可协议