all-threads-bot

Frontender`s Spectre

File System Access API в JavaScript: удобный доступ к локальным файлам и папкам в браузере

28 марта 2023 г., 18:00

File System Access API в JavaScript предоставляет разработчикам возможность доступа к файловой системе пользователя через API, что позволяет создавать более мощные и удобные приложения, работающие в браузере. Например, с помощью этого API можно сохранять, открывать и редактировать файлы на локальном диске пользователя.

Для начала работы с File System Access API нужно запросить разрешение на доступ к файловой системе. Это можно сделать с помощью метода showOpenFilePicker() или showSaveFilePicker().

  
    const options = {
      types: [
        {
          description: 'Text Files',
          accept: {
            'text/plain': ['.txt'],
          },
        },
      ],
    };

    const [fileHandle] = await window.showSaveFilePicker(options);
  

В этом примере мы запрашиваем разрешение на сохранение файла типа .txt. Если пользователь предоставит разрешение, мы получим доступ к fileHandle, который можно использовать для сохранения файлов в локальной файловой системе.

Теперь, когда у нас есть fileHandle, мы можем использовать его для чтения или записи файлов. Для этого нужно получить fileHandle и использовать его для открытия файла. Мы можем использовать метод getFile() для получения объекта File и работать с ним так же, как мы работаем с файлами в JavaScript.

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

В этом примере мы получаем объект File с помощью метода getFile() и используем метод text() для чтения содержимого файла. Результат чтения выводится в консоль.

File System Access API также позволяет создавать и удалять папки, используя методы getDirectoryHandle() и removeEntry().

  
    const dirHandle = await window.showDirectoryPicker();
    const newDirHandle = await dirHandle.getDirectoryHandle('new_folder', {create: true});
    await newDirHandle.removeEntry();
  

В этом примере мы запрашиваем разрешение на доступ к папке, создаем новую папку с помощью метода getDirectoryHandle() и удаляем ее с помощью метода removeEntry().

File System Access API в JavaScript открывает новые возможности для создания более мощных и удобных веб-приложений, которые могут работать с локальными файлами и папками пользователя. С помощью этого API можно создавать редакторы кода, приложения для работы с базами данных и многое другое. Важно помнить о безопасности при работе с локальными файлами, чтобы не нарушить безопасность пользователя.