HTML5来实现本地文件读取和写入的实现方法

实现本地文件读取和写入需要使用HTML5中的File API。File API提供了访问本地文件系统的能力，可以读取本地文件的内容并在网页中展示出来，同时也可以在网页上新建或覆盖本地文件。

实现方法如下：

1.读取本地文件内容

要读取本地文件内容，我们需要使用FileReader对象。

示例1：读取本地txt文件并将其内容展示在网页中。

<input type="file" onchange="loadFile()" />
<textarea id="file-content"></textarea>

<script>
  function loadFile() {
    const fileInput = document.querySelector('input[type="file"]');
    const fileContent = document.querySelector('#file-content');

    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event) => {
      fileContent.value = event.target.result;
    });

    reader.readAsText(file);
  }
</script>

上述代码中，我们在网页中添加了一个文件选择框，当用户选择文件后，通过FileReader对象将文件内容读取出来，并展示在网页中的textarea元素中。

2.写入本地文件内容

要写入本地文件内容，我们需要使用FileWriter对象。

示例2：在本地新建一个txt文件，并将文本内容写入到该文件中。

<textarea id="new-file-content"></textarea>
<button onclick="saveFile()">保存文件</button>

<script>
  function saveFile() {
    const fileContent = document.querySelector('#new-file-content').value;

    const file = new File([fileContent], 'new-file.txt', {
      type: 'text/plain'
    });

    const writer = new FileWriter();

    writer.addEventListener('writeend', () => {
      console.log('File saved successfully!');
    });

    writer.write(file);
  }
</script>

上述代码中，我们在网页中添加了一个输入框和一个保存文件按钮。当用户输入完文件内容后，点击保存文件按钮，使用FileWriter对象将文本内容写入到本地的new-file.txt文件中。

需要注意的是，写入本地文件需要用户授权，所以在上述代码中，我们省略了获取授权的相关代码。在实际应用中，需要先通过用户授权才能进行写入操作。