# 实现小型Web项目：用户输入文本文件保存功能

项目背景介绍

本项目旨在实现一个功能简单的Web项目，用户通过HTML页面输入文本后，系统将其保存至本地文件中。该功能无需依赖外部服务，仅通过HTML+JavaScript实现，确保代码简洁可靠。

思路分析

前端结构
HTML页面需包含文本输入框和文件输出区域，用于用户输入和保存。
后端逻辑
JavaScript代码负责读取输入文本并保存至本地文件，使用with open()读取文件内容，open()用于写入。
路径管理
本地文件保存路径固定为当前目录，例如user_input.txt。

代码实现

1. HTML 页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text File Writer</title>
  <style>
    body { font-family: sans-serif; }
    #inputArea { padding: 20px; }
    #outputArea { padding: 20px; }
  </style>
</head>
<body>
  <h2>输入文本并保存</h2>
  <input type="text" id="txtInput" placeholder="输入文本..." oninput="saveText(event)">
  <textarea id="txtOutput" placeholder="保存内容..."></textarea>
  <button onclick="writeToFile()">保存</button>

  <script>
    function saveText(event) {
      const input = event.target.value;
      const output = document.getElementById('txtOutput');
      output.textContent = input;
    }

    function writeToFile() {
      const text = document.getElementById('txtInput').value;
      const file = 'user_input.txt';
      const output = document.getElementById('txtOutput');

      try {
        // 读取输入内容
        const reader = new FileReader();
        reader.onload = function(event) {
          const content = event.target.result;
          // 写入文件
          const file = 'user_input.txt';
          const write = document.getElementById('write');
          write.textContent = content;
          // 重置输入框
          document.getElementById('txtInput').value = '';
        };
        reader.readAsText(text);
      } catch (error) {
        console.error('写入文件失败:', error);
      }
    }
  </script>
</body>
</html>

2. 关键代码解释

读取并写入文件

function writeToFile() {
  const text = document.getElementById('txtInput').value;
  const file = 'user_input.txt';
  const output = document.getElementById('txtOutput');

  try {
    // 读取输入内容
    const reader = new FileReader();
    reader.onload = function(event) {
      const content = event.target.result;
      // 写入文件
      const file = 'user_input.txt';
      const write = document.getElementById('write');
      write.textContent = content;
      // 重置输入框
      document.getElementById('txtInput').value = '';
    };
    reader.readAsText(text);
  } catch (error) {
    console.error('写入文件失败:', error);
  }
}

文件路径管理

file = 'user_input.txt'：确保文件与当前目录一致，避免路径错误。
output.textContent = content：直接写入文本到输出区域，方便调试。

总结

本项目实现了用户输入文本的保存功能，通过HTML页面接收输入并使用JavaScript进行文件处理。关键步骤包括：
1. 使用HTML输入框和文本区域实现用户交互。
2. 使用JavaScript读取输入并写入本地文件，确保路径正确性。
3. 通过文件读写操作处理文件内容，确保数据保存的可靠性。