如何使用javascript將表單數據附加並保存到txt文件

Question

我有這個 html 代碼：

<form  action="" method="post" id="formToSave">
                <h1>Subscribe For Latest Blogs</h1>
                <p>Please subscribe in my website using your email address for latest updates about my blogs and publications.</p>
                <div class="email-box">
                    <i class="fas fa-envelope"></i>
                    <input class="tbox" type="email" name="email" id ="email" value="" placeholder="Enter Your Email Address">
                    <m><button class="btn" type="submit" name="button" onclick="saveFile()" >Subscribe</button></m>
                </div>
            </form>

還有這個javascript代碼：

<script>
    let saveFile = () => {
        const email = document.getElementById('email');
        let data = email.value;
        const textToBLOB = new Blob([data], { type: 'text/plain' });
        }
</script>

我想將電子郵件地址表單數據保存到文本文件中，並將更多電子郵件地址附加到該文件中。 我接下來該怎么做？

Answer 1

首先，我建議在服務器中執行此操作，因為瀏覽器 javascript 無法訪問文件系統，也無法將新文本附加到文件中。 但是，如果您需要一個僅包含一個客戶提供的電子郵件的文本文件，以下代碼可能會有所幫助。 請記住，這僅適用於客戶端，對於沒有服務器的訂閱系統無濟於事。

 const emailsList = [] function addEmailToList() { const email = document.getElementById('email') const { value } = email emailsList.push(value) } function downloadFile() { const textFile = btoa(emailsList.join('\\n')) const saveElement = document.createElement('a') saveElement.href = `data:text/plain;base64,${textFile}` saveElement.download = 'myList.txt' document.body.appendChild(saveElement) saveElement.click() document.body.removeChild(saveElement) }

 <form action="" method="post" id="formToSave"> <h1>Subscribe For Latest Blogs</h1> <p>Please subscribe in my website using your email address for latest updates about my blogs and publications.</p> <div class="email-box"> <i class="fas fa-envelope"></i> <input class="tbox" type="email" name="email" id="email" value="" placeholder="Enter Your Email Address" /> <m><button class="btn" type="button" name="button" onclick="addEmailToList()">Subscribe</button></m> <m><button class="btn" type="button" name="button" onclick="downloadFile()">Download TextFile</button></m> </div> </form>