我的js脚本可以正常保存进度文件，但无法再次正确加载它

Question

我创建了一个包含多个字段的在线表单，我希望能够保存进度并稍后再次加载。

当我保存它时，它似乎工作正常（所有信息都在 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": ""
}

但是区域和边框不会再次加载到表单中。

Answer 1

这可能对你有帮助

    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>