将 JSON 格式的 HTML 表单输入保存到本地文件（如果可能，使用 javascript）

Question

不幸的是，我无法将 JSON 输入保存到本地目录（我完全是 javascript 新手） .代码如下所示。

<header class="banner">
<h1 style="color:blue">HTML User Input to local file location</h1><main>
    <form id="myform" type="post">
    <style>
        .formBox{
            padding: 0.5rem 2rem;
        }
    </style>
        <fieldset>
            <legend style="color:blue">Sign Up</legend>
            <p style="color:red">Write your con-fig codes below</p>
            <div class="formbox">
                <label for="Input1">Input1 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input1" 
name="Input1" size="25" id="Input1" />
            </div>
            <div class="formbox">
                <label for="Input2">Input2 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input2" 
name="Input2" size="25" id="Input2" />
            </div>
            <div class="formbox">
                <label for="Input3">Input3 :</label>
                <input required="required" type="text" onfocus="this.value=''" value="Input3" 
name="Input3" size="25" id="Input3" />
            </div
            <div class="submit">
                <input type="submit" id="btn" name="submit" class="btn" value="Send" />
            </div>
            <div id="msg">
            <pre></pre>
        </div>
        </fieldset>
    </form>
    <script type="text/javascript">


    let Inputs = [];
        const AddData = (ev)=>{
            ev.preventDefault();  
            let data = {
                Input1: document.getElementById('Input1').value,
                Input2: document.getElementById('Input2').value,
                Input3: document.getElementById('Input3').value
            }
            Inputs.push(data);
            let pre = document.querySelector('#msg pre');
            pre.textContent = '\n' + JSON.stringify(Inputs, '\t', 2);
            localStorage.setItem('MyData', JSON.stringify(Inputs) );
        }
        document.addEventListener('DOMContentLoaded', ()=>{
            document.getElementById('btn').addEventListener('click', AddData);

        });


    </script>
    </main>

上面的代码会给我这个输出：Testing output

我正在查看不同的代码以找到一种将其保存到本地目录的方法，其中一个代码来自here，如下所示：

function download(content, fileName, contentType) {
    var a = document.createElement("a");
    var file = new Blob([content], {type: contentType});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}
download(jsonData, 'json.txt', 'text/plain');

但我完全不知道这是如何工作的。以下是我将其更改为：

    function Download(msg) {
        document.getElementById('msg').src = msg

    $(document).ready(function() {
                function download(jsonData, hmmmm, text) {
                var msg = document.createElement("msg");
                var file = new Blob([jsonData], {type: text});
                msg.href = URL.createObjectURL(C:\Users\daves\OneDrive\Desktop\codetest);
                msg.download = hmmmm;
                msg.click();
}
            download(jsonData, 'json.txt', 'text');
            e.preventDefault();
            });
        };

我认为这意味着我会将输入数据以“hmmmm.json”的名称保存在文件“C:\Users\daves\OneDrive\Desktop\codetest”中 （上面的代码放在 script type="text/javascript" 和 /script

之间

我有一种很好的感觉，在这种情况下我错了。请指教。 感谢您的时间和理解。 （我是 javascript 的完全新手） （我周围没有人可以问）

Answer 1

我希望这个工作

        let obj = {
           val1: '233',
           val2: 'adfas',
           val3: 'weirpow' 
        }
        function onSave() {
            obj = {
                val1: document.querySelector('input:nth-child(1)').value,
                val2: document.querySelector('input:nth-child(2)').value,
                val3: document.querySelector('input:nth-child(3)').value
            }
            let stringObj =  '\n' + JSON.stringify(obj, null, 4);
            document.querySelector('span pre code').textContent = stringObj;
            var file = new Blob([stringObj], {type: 'text'});
            if (window.navigator.msSaveOrOpenBlob) // IE10+
            window.navigator.msSaveOrOpenBlob(file, 'saveFile');
            else { // Others
                var a = document.createElement("a"),
                url = URL.createObjectURL(file);
                a.href = url;
                a.download = 'saveFile';
                document.body.appendChild(a);
                a.click();  
                setTimeout(function() {
                    document.body.removeChild(a);
                    window.URL.revokeObjectURL(url);  
            }, 0); 
    }
        }

    <input type="text" value="" />
    <input type="text" value="" />
    <input type="text" value="" />

    <button onclick="onSave()">Save</button>

    result: <span>
       <pre>
        <code></code>
       </pre>
     </span>