写在上面
最新版本的Chrome（Chrome83，需要启用）支持直接读写本地文件。
打开方法：Chrome浏览器升级至83以上版本； 访问 chrome://flags/，然后打开 NativeFileSystemAPI 选项
目前如何读写本地文件
目前最常见的读取本地文件的方式：
1.使用input标签获取文件File对象。
<input type="file" />
2.使用FileReader读取文件。
var reader = new FileReader();
reader.onload = function (event) {
// event.target.result就是读取的内容
...
};
// 这里的file为File对象实例
reader.readAsText(file);
// reader.readAsDataURL(file);
// reader.readAsArrayBuffer(file);
写入文件方法：
不幸的是，目前还没有直接在本地写入文件的技术。 不过大致可以通过以下方式来实现：
var textFileAsBlob = new Blob(['hello word'], {type:'text/plain'});
var downloadLink = document.createElement("a");
downloadLink.download = 'test.txt';
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.click();
如何在最新的Chrome浏览器中读写文件
读取文件
使用 window.chooseFileSystemEntries API。 需要注意的是，调用该API必须由用户操作触发，例如点击。
// 文件句柄
let fileHandle;
button.addEventListener('click', async (e) => {
fileHandle = await window.chooseFileSystemEntries();
console.log(fileHandle);
});
调用api后，会弹出一个文件窗口。 用户选择一个文件后，可以获得该文件的句柄。
然后，通过调用句柄javascript 读取文件，就可以获取文件内容。
let fileHandle;
button.addEventListener('click', async (e) => {
fileHandle = await window.chooseFileSystemEntries();
const file = await globalFileHandle.getFile();
const contents = await file.text(); // 这里的方法还有：slice(), stream(), arrayBuffer()
});
写文件
写入文件分为两种情况，一种是直接写入原文件，另一种是写入新文件。
要写入原始文件，我们只需要获取原始文件的句柄并调用该句柄即可。
const writable = await fileHandle.createWritable();
await writable.write('new content');
await writable.close();
要写入新文件，首先需要创建一个新文件，仍然是调用window.chooseFileSystemEntries api，不过这次需要传入一些参数。
button.addEventListener('click', async function() {
const opts = {
type: 'save-file',
accepts: [{
description: 'Text file',
extensions: ['txt'],
mimeTypes: ['text/plain'],
}]
};
// 新建文件的句柄
const fileHandle = await window.chooseFileSystemEntries(opts);
...
});
然后按照之前的方法，写内容。
有关读写本机文件的更多信息，请参考这篇文章：web.dev/native-file...
示例演示
新的文件API非常方便。 我只是写了一个在浏览器中编辑本地文件的demo。
demo体验地址和代码在这里（请使用最新版本的桌面Chrome浏览器访问javascript 读取文件，并开启文件读写权限）：
coypan.info/demo/chrome...
写在前面
您如何看待这一波 Chrome 更新？ 网络应用程序？ 网站？
