如何将变量保存到 JSON 文件？答案

【问题标题】：How to save variables to a JSON file?如何将变量保存到 JSON 文件？
【发布时间】：2019-08-25 17:11:52
【问题描述】：

我对 JQuery、JS 和 JSON 很陌生

我正在尝试获取使用此代码创建的基本保存文件：

<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
$.setJSON("testJSON", myJSON);

// Retrieving data:
text = $.getJSON("testJSON.json");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

我很确定 $.setJSON 不存在，但我找不到我用来设置变量的东西。最终我想设置循环并将文本区域中的文本保存在 json 文件中。

我知道这不是一件好事，我应该用 php 和 sql 来设置它。但这只会被 2 个用户使用，并且不会同时使用。

任何帮助都会很棒。

【问题讨论】：

您到底想做什么？ JavaScript 无法访问用户的本地文件系统，因此您不能只写入文件。你可以提示用户下载一些东西
首先getJSON不返回文本；它返回一个可以解析为文本（或已解析的数据）的承诺。其次，虽然像 Apache httpd 这样的 Web 服务器可以为您读取文件，但它不会为您写入文件；您需要在服务器上有一些东西来接受发布的数据并将其保存到文件中。它可能是 PHP，或 CGI 脚本，或您选择的语言的另一个进程的代理。你会向这个活动组件发起一个请求，通常使用$.ajax，要求它为你保存一些东西。
@Phil 所以没有办法在单个设备上自动生成保存文件，而且这个线程有点链接到最后一个，（你回答了）
您可以使用cookies或本地存储在客户端存储数据。您的要求不明确。
就像我说的，您可以提示用户保存文件，但该操作的触发和文件的目的地取决于他们；您不能以编程方式执行此操作

标签： javascript jquery html json ajax

【解决方案1】：

关于文件操作，您可以执行以下操作。

提示用户下载

使用download 属性和data-uri href 为 JSON 创建一个锚点。

const data = { name: "John", age: 31, city: "New York" };
document.getElementById('download').addEventListener('click', () => {
  let dl = document.createElement('a')
  dl.download = 'test.json' // target filename
  dl.href = `data:application/json;charset=utf-8,${JSON.stringify(data)}`
  dl.click()
})

&lt;button id="download" type="button"&gt;Save&lt;/button&gt;

您可能会遇到 URI 长度问题，具体取决于数据的大小，但考虑到您可以轻松地将几 MB 的图像 base64 编码为 data-uri，我可能不会担心.

允许用户上传文件

在<input type="file"> 上监听 input 或 change 事件并读取文件数据

document.getElementById('upload').addEventListener('input', e => {
  let file = e.currentTarget.files[0]
  let reader = new FileReader()
  reader.onload = e => {
    try {
      let obj = JSON.parse(e.target.result)
      
      // congrats, you now have an object from the file
      
      document.getElementById('out').textContent = JSON.stringify(obj, null, 2)
    } catch (err) {
      console.error('JSON parsing error', err.message)
    }
  }
  reader.onerror = e => {
    console.error('PANIC!', e)
  }
  reader.readAsText(file)
})

<dl>
<dt><label for="upload">Upload your <code>.json</code> file</label></dt>
<dd><input type="file" id="upload"></dd>
</dl>

<pre id="out"></pre>

此答案省略了很多错误检查，因此我建议您阅读使用FileReader API 了解更多详细信息。

【讨论】：

【解决方案2】：

您必须将 .json 文本解析为 JavaScript。 JSON.parse()。然后你就可以得到属性了。

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

【讨论】：

【解决方案3】：

除了其他一些

，JS不会访问计算机

您应该（这不应该只是存储 json 的另一种方式，因为 js 无论如何都无法通过文件夹访问）将您的 json 存储到 localStorage.setItem(keytolaterretreive,yourJson)

您可以稍后检索它localStorage.getItem(keytolaterretreive) 这将返回您想要的 json

例子：

myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("myJson",myJSON);
retreivedJson = localStorage.getItem("myJson");
console.log(retreivedJson);<-- your json will be consoled

更多关于localStorage的信息

【讨论】：

【解决方案4】：

浏览器中的 Javascript 没有对底层文件系统的 API 访问权限，因此您将无法以这种方式保存 JSON 文件。您唯一能做的就是将用户数据聚合到表单中，然后通过 AJAX 将数据发布到服务器端 API。

This 文档应该可以帮助您了解 FormData 以及如何发送它。

【讨论】：