将JSON数据保存到文本文件并读取它

问题描述

是否可以将JSON数据保存到本地文本文件中？所以稍后我可以再次使用它来加载该文件并获取存储的JSON数据。其实我真的想要做的是在文本文件中导出JSON数据，以便我以后可以用作import.Any建议或解决方案在这里？

Is there possible to save JSON data into local text file? So later i can use it again using by load that file and get the stored JSON data back. Actually want i really want to do is to export JSON data in text file so i can use later as import.Any suggestion or solution here?

这是我想用来导出到文本的一些例子。

This is some example that i want to use to export to text.

var data = new Blob([text], {type: 'text/plain'});

推荐答案

是。目前，链接jsfiddle的JavaScript会创建一个 .txt 文件，而不是一个有效的 JSON 文件。

Yes. Currently JavaScript at linked jsfiddle creates a .txt file, not a valid JSON file.

您可以使用 try..catch..finally 和 JSON.parse（）检查< textarea> 元素的输入是否有效 JSON 。如果 .value < textarea> 有效 JSON 使用 Blob 创建 Blob URL 或使用MIME 文件构造函数code>键入属性设置为application / json。和 URL.createObjectURL（），否则通知用户输入无效 JSON 。

You can use try..catch..finally and JSON.parse() to check if input at <textarea> element is valid JSON. If .value of <textarea> is valid JSON create Blob URL using Blob or File constructor with MIME type property set to "application/json". and URL.createObjectURL(), else notify user that input is invalid JSON.

(function () {

 let file, url, reader = new FileReader;

 function createJSONFile(json) {
    let e = void 0;
    try {
      JSON.parse(json)
    } catch (err) {
      e = err;
      code.textContent = e;
    }
    finally {
      if (e) {
        code.classList.add("invalid");
        return "Invalid JSON";
      }
      else {
        code.classList.remove("invalid");
        file = new File([json], "info.json", {type:"application/json"});
        url = URL.createObjectURL(file);
        return url;
      }
    }
  };

  function revokeBlobURL() {
    window.removeEventListener("focus", revokeBlobURL);
    URL.revokeObjectURL(url);
    if (file.close) {
      file.close();
    }
  }

  function readJSON(e) {
    reader.readAsText(input.files[0]);
  }

  let create = document.getElementById("create"),
    textbox = document.getElementById("textbox"),
    code = document.querySelector("code"),
    input = document.querySelector("input[type=file]"),
    pre = document.querySelector("pre");

  create.addEventListener("click", function () {
    var link = document.createElement("a");
    link.setAttribute("download", "info.json");
    var json = createJSONFile(textbox.value);
    if (json !== "Invalid JSON") {
      link.href = json;
      document.body.appendChild(link);
      code.textContent = "Valid JSON";
      link.click();
      window.addEventListener("focus", revokeBlobURL);
    } else {
      code.textContext = json;
    }
  }, false);

  reader.addEventListener("load", function() {
    pre.textContent = JSON.stringify(reader.result, null, 2);
  });

  input.addEventListener("change", readJSON);
})();

code {
  display:block;
  width: 350px;
  height: 28px;
  border: 1px dotted green;
  padding: 4px;
  margin: 4px;
  color: green;
}

.invalid {
  border: 1px dotted red;
  color: red;
}

pre {
  background: #eee;
  width: 350px;
  height: 350px;
  border: 1px solid darkorange;
}

<textarea id="textbox" placeholder="Input valid JSON"></textarea><br>
<button id="create">Create file</button>
<br>
<code></code>
<input type="file" accept=".json" />
<pre></pre>

这篇关于将JSON数据保存到文本文件并读取它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！