javascript - 如何将变量保存到 JSON 文件？

Question

我对 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 个用户使用，而且不会同时使用。

任何帮助都会很棒。

Answer 1

以下是您可以执行的有关文件操作的操作。

提示用户下载

使用 download 创建 anchor 属性和 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()
})

<button id="download" type="button">Save</button>

您可能会遇到 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 了解更多详情。