是时候说再见了：Chrome浏览器支持直接读写本地文件了

2023-10-05 03:40:00

Chrome浏览器释放强大新功能：直接读写本地文件

对于Web开发人员来说，这绝对是一个激动人心的时刻！最新版本的Chrome浏览器（Chrome 83）引入了一项变革性的功能：直接读写本地文件的强大能力。过去，这个任务需要依靠第三方库或插件，既繁琐又缺乏安全性。但现在，这一切都改变了，让Web开发变得更加轻松高效。

为何这是一场革命

直接读写本地文件的能力为Web开发带来了诸多好处。首先，它简化了开发过程，让开发者能够直接在浏览器中访问本地资源。其次，它增强了Web应用程序的功能，允许它们与用户的文件系统进行无缝交互。此外，它提高了安全性，消除了第三方组件带来的潜在风险。

如何开启权限

为了享受Chrome浏览器的这一新功能，需要进行一个简单的权限设置。

在Chrome浏览器的地址栏中输入"chrome://flags/"并按回车键。
在"搜索标志"框中输入"文件访问"并按回车键。
在"启用本地文件访问"标志下，选择"已启用"。
重新启动Chrome浏览器。

读写本地文件

开启权限后，就可以使用HTML input标签获取文件对象了。

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

获取文件对象后，使用FileReader读取文件内容。

const file = document.getElementById('file-input').files[0];
const reader = new FileReader();

reader.onload = function() {
  // 文件已读取完毕，可以获取文件内容了
  const content = reader.result;
};

reader.readAsText(file);

写入本地文件

虽然Chrome浏览器目前不支持直接写入本地文件的原生方法，但可以使用以下方法来实现：

使用window.chooseFileSystemEntries API选择本地文件夹。
使用File API将文件写入选定的文件夹。

window.chooseFileSystemEntries({type: 'save-file'}, function(fileEntries) {
  const fileEntry = fileEntries[0];

  const file = new File(['Hello, world!'], 'hello.txt', {type: 'text/plain'});

  fileEntry.createWriter(function(fileWriter) {
    fileWriter.write(file);
  });
});