我创建了一个包含多个字段的在线表单,我希望能够保存进度并稍后再次加载。
当我保存它时,它似乎工作正常(所有信息都在 json 文件中),但是当我加载保存的文件时,并非所有数据都会添加回在线表单中。具体来说,“区域”和“边界”的值未加载。
有人能看到我错过了什么吗?谢谢。
/**
* Saves the progress of the form inputs to a JSON file.
*/
function saveProgress() {
const settingsForm = document.getElementById('settingsForm');
const regionsForm = document.getElementById('regionsForm');
const bordersForm = document.getElementById('bordersForm');
const commandsForm = document.getElementById('commandsForm');
const settingsData = new FormData(settingsForm);
const regionsData = new FormData(regionsForm);
const bordersData = new FormData(bordersForm);
const commandsData = new FormData(commandsForm);
let jsonObject = {};
settingsData.forEach((value, key) => {
if (key === 'deployments') {
jsonObject[key] = value;
} else if (key === 'size' || key === 'difficulty') {
jsonObject[key] = document.querySelector(`input[name="${key}"]:checked`).value;
} else {
jsonObject[key] = value;
}
});
regionsData.forEach((value, key) => {
jsonObject[key] = value;
});
bordersData.forEach((value, key) => {
jsonObject[key] = value;
});
commandsData.forEach((value, key) => {
jsonObject[key] = value;
});
jsonObject["regions"] = document.getElementById('regions').value;
jsonObject["borders"] = document.getElementById('borders').value;
const jsonString = JSON.stringify(jsonObject, null, 2);
const blob = new Blob([jsonString], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = 'progress.json';
downloadLink.click();
URL.revokeObjectURL(url);
}
/**
* Loads the progress from a JSON file and populates the form inputs.
*/
function loadProgress() {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/json';
fileInput.onchange = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const jsonObject = JSON.parse(e.target.result);
document.getElementById('engine').value = jsonObject.engine || '1';
document.getElementById('version').value = jsonObject.version || '1';
document.getElementById('title').value = jsonObject.title || '';
document.getElementById('key').value = jsonObject.key || '';
document.querySelector(`input[name="size"][value="${jsonObject.size}"]`).checked = true;
document.querySelector(`input[name="difficulty"][value="${jsonObject.difficulty}"]`).checked = true;
document.getElementById('players').value = jsonObject.players || '2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24';
document.getElementById('objectives').value = jsonObject.objectives || 'Standard, Assassin, Mercenary';
document.getElementById('reserves').value = jsonObject.reserves || 'Escalate, Escalite, FlatRate(6)';
document.getElementById('reinforcements').value = jsonObject.reinforcements || 'Border, Path, Anywhere';
document.getElementById('initialTroops').value = jsonObject.initialTroops || '3';
document.getElementById('kind').value = jsonObject.kind || '';
document.getElementById('deployments').value = jsonObject.deployments || '';
document.getElementById('regions').value = jsonObject.regions || '';
document.getElementById('borders').value = jsonObject.borders || '';
document.getElementById('command').value = jsonObject.command || '';
};
reader.readAsText(file);
}
};
fileInput.click();
}
这就是保存的 json 文件的样子
{
"engine": "1",
"version": "1",
"title": "test-new",
"key": "test-new",
"size": "Medium",
"difficulty": "Intermediate",
"players": "2,3,4,5,6,7,8,9,10,12,14,15,16,18,20,21,22,24",
"objectives": "Standard, Assassin, Mercenary",
"reserves": "Escalate, Escalite, FlatRate(6)",
"reinforcements": "Border, Path, Anywhere",
"initialTroops": "3",
"regions": "region1\nr2",
"borders": "r1,r2\nr2,r3",
"command": ""
}
但是区域和边框不会再次加载到表单中。
这可能对你有帮助
const input = document.querySelector('input[type=file]');
const textarea = document.querySelector('textarea');
function readFile(event) {
textarea.textContent = event.target.result;
const jsonObject = JSON.parse(event.target.result);
console.log(jsonObject);
}
function changeFile() {
const file = input.files[0];
const reader = new FileReader();
reader.addEventListener('load', readFile);
reader.readAsText(file);
}
input.addEventListener('change', changeFile);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="file">
<textarea rows="10" cols="50"></textarea>
</body>
</html>