Можно ли сохранить данные JSON в локальный текстовый файл? Поэтому позже я могу использовать его снова, используя загрузку этого файла и вернуть сохраненные данные JSON. На самом деле хочу, чтобы я действительно хотел сделать, это экспортировать данные JSON в текстовый файл, поэтому я могу использовать его позже как import.Any предложение или решение здесь?
Это пример, который я хочу использовать для экспорта в текст.
var data = new Blob([text], {type: 'text/plain'});
Можно ли сохранить данные JSON в локальный текстовый файл?
Да. В настоящее время JavaScript в связанном jsfiddle создает .txt
файл, а не действительный файл JSON
.
Вы можете использовать try..catch..finally
и JSON.parse()
чтобы проверить, является ли вход в элементе <textarea>
действительным JSON
. Если .value
из <textarea>
является действительным JSON
создать Blob URL
с помощью Blob
или File
конструктор с MIME type
собственности, установленным в "application/json"
. и URL.createObjectURL()
, иначе уведомите пользователя о том, что вход недействителен 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>
Вы спрашиваете, возможно ли это, вы, например, ясно демонстрируете, что это так. Я думаю, вы хотите знать, как читать текстовый файл после его создания. В этом случае вы можете выполнить ответ в этом вопросе: прочитать локальный текстовый файл с помощью Javascript
JSON - это просто форматированная строка, которая позволяет JavaScript восстанавливать объекты, а это значит, что вы просто сохраняете строку в текстовом файле, затем читаете ее снова и конвертируете в объект с помощью JSON.parse()
.
Вот рабочий пример:
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
// If we are replacing a previously generated file we need to
// manually revoke the object URL to avoid memory leaks.
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var create = document.getElementById('create'),
textbox = document.getElementById('textbox');
create.addEventListener('click', function () {
var link = document.createElement('a');
link.setAttribute('download', 'info.txt');
link.href = makeTextFile(textbox.value);
document.body.appendChild(link);
// wait for the link to be added to the document
window.requestAnimationFrame(function () {
var event = new MouseEvent('click');
link.dispatchEvent(event);
document.body.removeChild(link);
});
}, false);
})();
var fileInput = document.getElementById('files');
var fileDisplayArea = document.getElementById('test');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerText = reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!"
}
});
<textarea id="textbox">Type something here</textarea> <button id="create">Create file</button>
<input type="file" id="files" name="files" multiple />
<output id="list"></output>
<div id = "test">
</div>
Сохраните строку json в текстовом файле, затем прочитайте ее. Это просто руководство.