В прошлом страница, которую вы хотите читать и записывать в файлы, доставляла слишком много хлопот, чтобы прочитать файл, нам нужно создатьtype="file"изinputТег позволяет пользователю выбрать файл, и для того, чтобы сохранить некоторый контент на локальный жесткий диск, нам нужно использоватьaпомеченdownloadсвойство для запуска сохранения файла.

Непрерывное сохранение файлов невозможно, так как запись файлов на локальный жесткий диск должна вызывать всплывающее окно «Сохранить». Также невозможно пройти через локальный каталог.

В последней версии Chrome 78 Google открыла экспериментальную функцию: Native File System, которая представляет собой новый локальный API для чтения и записи файлов, который еще не разработан, поэтому эта функция не включена по умолчанию.

Если вы хотите испытать этот API, вы можете выполнить поиск по адресу chrome://flags.Native File System APIвключить.

Для ознакомления с этим API вы можете обратиться к:GitHub.com/WICG/родной…

Это совершенно новый API для чтения и записи файлов, который обеспечивает более удобный способ чтения и записи локальных файлов, но также создает большие риски для безопасности, поэтому этот API можно использовать только на защищенных страницах (например, при развертывании эффективной страницы https). , и он должен управляться по выбору пользователя (то есть он не может быть полностью автоматизирован в фоновом режиме).

Открыть и прочитать содержимое файла

Чтобы прочитать локальный файл, нам нужно вызватьwindow.chooseFileSystemEntries(option)интерфейс, который принимаетoptionкак параметр.

optionпредставляет собой объект, содержащий 4 настраиваемых элемента конфигурации:

элемент конфигурации	стоимость	объяснять
type	'openFile'/'saveFile'/'openDirectory'	Тип операции, будь то открытие файла, сохранение файла или открытие папки, по умолчанию'open-file'
multiple	boolean	Разрешить пользователю выбирать один файл или выбирать несколько файлов, по умолчаниюfalse, то есть можно выбрать только один файл
accepts	object[]	Укажите типы файлов, которые разрешено выбирать во всплывающем окне выбора файлов.
accepts.description	string	описывать
accepts.mimeTypes	string[]	MIME-типы файлов, которые разрешено выбирать
accepts.extensions	string[]	Расширения для файлов, которые разрешено выбирать
excludeAcceptAllOption	boolean	Разрешить ли выбор не вышеacceptsСписок разрешенных типов файлов, по умолчаниюfalse, что позволяет выбирать произвольные файлы (*.*)

window.chooseFileSystemEntries(option)вернутьFileSystemHandleобъект (еслиoptionсерединаmultipleОбозначен какtrue, затем возвращаетFileSystemHandleмножество).

FileSystemHandleпо сути это базовый классchooseFileSystemEntriesсогласно сoptionуказано вtype, который возвращает его подклассFileSystemFileHandleилиFileSystemDirectoryHandle.

если указаноoptionэто открыть папку, вернутьсяFileSystemDirectoryHandle, вы можете просмотреть каталог или открыть указанный файл, и открытие файла вернетFileSystemFileHandle. если указаноoptionоткрыть/сохранить файл, вернуться напрямуюFileSystemFileHandle.

пройти черезFileSystemFileHandleВверхgetFile()функцию, вы можете получитьFileобъект.

иди сюдаFileобъект сtype="file"изinputвернутьFileНапример, вы можете пройти черезFileAPI объекта получает конкретное содержимое файла. Например, для текстовых файлов вы можете напрямую вызвать.text()чтобы получить строку, для бинарных файлов вы можете позвонить.arrayBuffer()получатьArrayBufferобъект, вы также можете позвонить.stream()получить одинReadableStream.

const handler = await window.chooseFileSystemEntries({
  type: 'openFile',
  accepts: [
    { description: '文本文件', extensions: ['txt'] },
  ],
});

const file = await handler.getFile();
const text = await file.text();
console.log(text);

Сохранение файлов на локальный жесткий диск

Для того, чтобы сохранить файл на жесткий диск, нам нужно вызватьFileSystemFileHandleна объектеcreateWriter()функция.

Обычно существует два режима сохранения файлов: один — «Сохранить», при котором исходный файл перезаписывается, а другой — «Сохранить как», при котором создается новый файл.

форму "сохранить как", нам просто нужно вспомнитьwindow.chooseFileSystemEntries()Предоставьте возможность сохранить файл. И «сохранить» файл, мы напрямую используем ранее открытый файлFileSystemFileHandleобъект.

передачаcreateWriter()Функция вернетFileSystemWriterобъект, который содержит три функции:write(position, data),truncate(size)а такжеclose().

writeпервый параметр функцииpositionЭто число, указывающее позицию для начала записи, а второй параметр — данные для записи, которые можноArrayBufferобъект,ArrayBufferViewобъект (Uint8Array,DataViewкакой-то тип),Blobобъект или напрямую предоставить строку для записи.

truncateФункция обрезает файл до указанной длины. Обычно происходит, когда файл, который нужно сохранить, меньше исходного файла, если вы вызываете напрямуюwriteфункции, только первая часть файла будет перезаписана, а исходное содержимое файла останется.

вызовcreateWriter()При вызове функции браузер сначала проверяет, разрешил ли пользователь разрешение на запись файла.Если файл был открыт в виде «открыть файл» или «открыть папку», по умолчанию права на запись файла нет. на этот раз браузер предложит пользователю подать заявку на разрешение на запись файла. Если пользователь отклоняет запрошенное разрешение, будет выдано исключение.

const handler = await window.chooseFileSystemEntries({
  type: 'saveFile',
  accepts: [
    { description: '文本文件', extensions: ['txt'] },
  ],
});

const writer = await handler.createWriter();
await writer.truncate(0);  // 清空文件
await writer.write(0, 'Hello World!');  // 在文件头写入字符串
await writer.close();

const file = await handler.getFile();
const text = await file.text();
console.log(text);

Обход локального каталога

упомянутый ранееwindow.chooseFileSystemEntries()в функции,optionВы можете указать, чтобы открыть папку.В это время браузер будет запрашивать у пользователя разрешение на обход каталога.После получения согласия пользователя, вы можете получитьFileSystemDirectoryHandleобъект.

FileSystemDirectoryHandleобъект имеетgetEntries()функция, которая возвращает асинхронный итератор, к которому можно получить доступ черезfor await ... of ...Цикл проходит по каталогу. Каждый обход получаетFileSystemHandleобъект, согласно.isFileатрибут с.isDirectoryАтрибутивное суждение специальноFileSystemFileHandleобъект ещеFileSystemDirectoryHandleобъект.

Помимо использованияgetEntries()обход, вы также можете пройтиFileSystemDirectoryHandleна объектеgetDirectoryФункция открывает указанный подкаталог, который также является подкаталогомFileSystemDirectoryHandleобъект; также черезgetFileФункция открывает указанный файл и получаетFileSystemFileHandleобъект.

const handler = await window.chooseFileSystemEntries({
  type: 'openDirectory',
});

const ls = async (path, handler) => {
  const result = [];
  for await (const h of await handler.getEntries()) {
    if (h.isFile) {
      result.push(`${path}/${h.name}`);
    } else if (h.isDirectory) {
      const subDirectory = await ls(`${path}/${h.name}`, h);
      result.push(...subDirectory);
    }
  }
  return result;
};

const files = await ls(handler.name, handler);
console.log(files);

Безопасность и разрешения

Все API-интерфейсы этого нового API-интерфейса собственной файловой системы начинаются сPromiseВозврат в форме, которая позволяет браузеру применить и проверять все разрешения до возврата функции, не блокируя выполнение другого кода. Когда разрешения недостаточно, браузер можетPromiseПривилегии приложения фазы ожидания для пользователей.

Чтобы предотвратить злоупотребление этим API вредоносными веб-сайтами для записи вредоносных файлов на компьютеры пользователей,window.chooseFileSystemEntries()Вызов функции должен быть инициирован пользователем на защищенной странице, то есть он должен быть помещен в обратный вызов взаимодействия с пользователем (например, событие нажатия кнопки), что аналогичноtype="file"изinputаналогичный.

Браузер может ограничить доступ к некоторым папкам, связанным с операционной системой, в целях защиты. И когда веб-сайт попытается записать файл в локальную папку, браузер выдаст уведомление.

Чтобы избежать частых всплывающих предупреждений о разрешениях, браузер сохранит разрешения, предоставленные пользователем.Как только пользователь предоставит веб-странице доступ к файлу, веб-страница получит это разрешение и не истечет, пока не будет закрыта.

После закрытия веб-страницы все разрешения будут восстановлены, и веб-сайту необходимо повторно подать заявку на получение разрешений при следующем открытии того же веб-сайта пользователем.

В будущем веб-страницы могут хранить информацию об авторизации во встроенной базе данных (IndexedDB) веб-страниц для сохранения запросов на разрешение.

Суммировать

На данный момент этот API не разработан, и стандарт все еще может быть изменен или удален. Тем не менее, появление этого API, несомненно, дает возможность для развития WebIDE.В будущем, возможно, можно будет больше не устанавливать локальную IDE, напрямую открывать локальный каталог проекта на веб-странице, редактировать и сохранять кода и напрямую использовать онлайн-среду виртуализации Тесты выполнения кода.

Однако пока неизвестно, принесет ли появление этого API серьезные проблемы с безопасностью, ведь для большинства начинающих пользователей, даже если веб-сайт выдает предупреждение безопасности, они все равно будут его напрямую игнорировать. Дело не в том, что они не обращают внимания, а в том, что они вообще этого не понимают.

Например, даже если HTTPS-конфигурация сайта неверна и отображается предупреждение о возможных рисках, пользователь привычно выберет «дополнительно» — «продолжить вход», поэтому появляется HSTS, когда на сайте есть ошибка HTTPS, Пользователю запрещается продолжать использовать сайт. .

Видно, что даже если браузер явно сообщает вам о наличии проблемы с безопасностью, пользователь предпочитает ее игнорировать, поэтому для приложения разрешения, предоставленного Native File System API, отображается только «окно подсказки». поставит это в мои глаза.» Это просто не проблема, чтобы быть уверенным.

Если пользователь получает доступ к вредоносному веб-сайту, приложению разрешений, после нажатия «ОК» данные на всем жестком диске будут зашифрованы...

Безопасность и удобство по-прежнему нуждаются в балансе!

Эммм... не в тему? . .

Прикреплен: Стандартный документ:Я ICG.GitHub.IO/native-file…

Демонстрация простого текстового редактора, предоставленная Chrome Labs:Google Chrome labs.GitHub.IO/текстовый редактор…