JavaScript中读取和保存文件实例

要在JavaScript中读取和保存文件，需要使用File API。File API是在Web应用程序中读取、创建和更新文件或文件的元数据的API。

读取本地文件

要读取本地文件，需要一个文件输入元素。可以使用以下代码创建文件输入元素：

<input type="file" id="file-input">

然后使用以下代码将文件内容读入内存：

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];

  const reader = new FileReader();
  reader.onload = () => {
    console.log(reader.result);
  };
  reader.readAsText(file);
});

这段代码可以处理用户选择的文件并读取它们的内容。在选择一个文件后，JavaScript将会把文件内容读入内存，并将其作为一个字符串返回。

保存内容到本地文件

要将内容保存到本地文件，需要使用FileSaver.js库。该库为我们提供了一个方便的API来保存文件。

可以使用以下代码将内容保存到本地文件：

<button id="save-button">保存</button>

const saveButton = document.getElementById('save-button');

saveButton.addEventListener('click', () => {
  const content = '这是要保存到文件的内容。';
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, 'file.txt');
});

这段代码将创建一个Blob对象，其中包含了要保存的文本内容，并将其传递给FileSaver.js的saveAs方法，该方法会弹出一个保存文件的对话框来让用户选择保存的位置。

以上是读取和保存文件的两个示例，其中读取文件依赖于File API，保存文件则依赖于FileSaver.js库。需要注意的是，不同的浏览器可能对File API的支持有所不同。