如何使用javascript将表单数据附加并保存到txt文件

Posted 2023-05-07

【中文标题】如何使用javascript将表单数据附加并保存到txt文件

【英文标题】：How to append and save form data to txt file using javascript

【发布时间】：2020-08-24 04:34:59

【问题描述】：

我有这个 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>

我想将电子邮件地址表单数据保存到文本文件中，并将更多电子邮件地址附加到该文件中。接下来我该怎么办？

【参考方案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>