Frontend File System Access API: Kohalike failide haldamine brauseris

File System Access API (varem tuntud kui Native File System API või lihtsalt File System API) on võimas veebi-API-de komplekt, mis võimaldab veebirakendustel suhelda kasutaja kohaliku failisüsteemi failide ja kaustadega otse brauserist. See avab uusi võimalusi veebipõhistele rakendustele, võimaldades neil täita ülesandeid, mis olid varem piiratud ainult natiivrakendustele.

Mis on File System Access API?

File System Access API pakub kasutajatele võimalust anda veebirakendustele juurdepääs oma kohalikule failisüsteemile. Erinevalt vanematest failide üles- ja allalaadimise mehhanismidest võimaldab see API rakendustel otse lugeda, kirjutada ja hallata faile ning kaustu kasutaja selgesõnalise nõusolekuga. See pakub sujuvamat ja integreeritumat kogemust, eriti rakenduste puhul, mis tegelevad suurte kohalike andmemahtudega või vajavad püsivat salvestusruumi.

File System Access API põhifunktsioonid on järgmised:

• Kasutaja antud load: Juurdepääs failisüsteemile antakse alles pärast seda, kui kasutaja on päringu selgesõnaliselt heaks kiitnud, tagades kasutaja privaatsuse ja turvalisuse.
• Püsiv salvestusruum: Veebirakendused saavad taotleda püsivat salvestusruumi, mis võimaldab neil säilitada juurdepääsu failidele ja kaustadele ka pärast brauseri sulgemist või värskendamist.
• Asünkroonsed operatsioonid: API kasutab peamiselt asünkroonseid operatsioone, vältides kasutajaliidese hangumist failisüsteemi interaktsioonide ajal.
• Voopõhine juurdepääs: Voogude tugi võimaldab suurte failide tõhusat käsitlemist ilma kogu faili mällu laadimata.
• Kaustajuurdepääs: Rakendused saavad taotleda juurdepääsu tervetele kaustadele, mis võimaldab neil hallata mitut faili ja kausta.
• Origin Private File System (OPFS): Failisüsteemi spetsiaalne isoleeritud osa, mis on unikaalne veebisaidi päritolule, pakkudes paremat jõudlust ja turvalisust konkreetsete kasutusjuhtude jaoks.

File System Access API kasutusjuhud

File System Access API avab veebirakendustele laia valiku võimalusi. Siin on mõned levinumad kasutusjuhud:

1. Kohalikud failiredaktorid ja IDE-d

Veebipõhised koodiredaktorid, tekstiredaktorid ja IDE-d saavad API-d kasutada, et otse avada, redigeerida ja salvestada faile kasutaja kohalikus failisüsteemis. See pakub natiivsemale sarnanevat kogemust võrreldes traditsiooniliste failide üles- ja allalaadimise töövoogudega. Kujutage ette veebipõhist IDE-d nagu VS Code, mis redigeerib otse teie kohapeal salvestatud projektifaile.

2. Pildi- ja videotöötlustööriistad

Pildi- ja videotöötlusrakendused saavad API-d kasutada suurte meediafailide tõhusaks töötlemiseks, mis on salvestatud kasutaja seadmesse. Voopõhine juurdepääs võimaldab faile redigeerida ilma kogu sisu mällu laadimata, parandades jõudlust ja vähendades mälukasutust. Näiteks võiks veebipõhine fotoredaktor otse avada ja salvestada pilte teie arvutist ilma üleslaadimise vajaduseta.

3. Dokumendihaldussüsteemid

Veebipõhised dokumendihaldussüsteemid saavad pakkuda sujuvat integratsiooni kasutaja kohaliku failisüsteemiga, võimaldades neil hõlpsasti oma dokumentidele juurde pääseda, neid korraldada ja hallata otse brauserist. Kujutage ette pilvesalvestusteenust, mis võimaldab teil otse avada ja redigeerida kohalikke dokumente nende veebiliideses.

4. Mänguarendus

Mänguarendajad saavad API-d kasutada mänguvarade salvestamiseks, mängu edenemise salvestamiseks ja kohandatud sisu laadimiseks otse kasutaja failisüsteemist. See võimaldab rikkalikumaid ja kaasahaaravamaid mängukogemusi veebis. Kujutage ette veebipõhist mängu, mis salvestab teie edenemise otse teie arvutisse.

5. Võrguühenduseta rakendused

File System Access API koos teiste tehnoloogiatega, nagu teenindustöötajad (service workers), võimaldab luua võrguühenduseta toimivaid veebirakendusi, mis jätkavad töötamist ka siis, kui kasutaja ei ole internetiga ühendatud. Andmeid saab salvestada kohalikult API abil ja sünkroonida kaugserveriga, kui ühendus taastub. See on eriti kasulik tootlikkusrakenduste jaoks, mis peavad sujuvalt töötama nii võrgus kui ka võrguühenduseta. Näiteks võib märkmete tegemise rakendus salvestada märkmeid kohalikult ja sünkroonida need pilvega, kui ühendus on saadaval.

6. Andmetöötlus ja analüüs

Veebirakendused saavad API-d kasutada kohalikult salvestatud suurte andmekogumite töötlemiseks ja analüüsimiseks. See on eriti kasulik teadusuuringute, andmeanalüüsi ja muude rakenduste jaoks, mis nõuavad suurte andmemahtude töötlemist. Kujutage ette veebipõhist andmete visualiseerimise tööriista, mis töötleb otse CSV-faili teie kõvakettalt.

Kuidas kasutada File System Access API-d

File System Access API pakub mitmeid funktsioone failisüsteemiga suhtlemiseks. Siin on põhiline ülevaade mõnede põhifunktsioonide kasutamisest:

1. Failisüsteemi juurdepääsu taotlemine

Esimene samm on kasutajalt failisüsteemile juurdepääsu taotlemine. Tavaliselt tehakse seda meetoditega showOpenFilePicker() või showSaveFilePicker().

showOpenFilePicker()

Meetod showOpenFilePicker() palub kasutajal valida ühe või mitu faili. See tagastab promise'i, mis laheneb FileSystemFileHandle objektide massiiviga, mis esindavad valitud faile.

            
async function openFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log(contents);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

Näite selgitus:

• `async function openFile() { ... }`: Määratleb asünkroonse funktsiooni faili avamise protsessi käsitlemiseks.
• `const [fileHandle] = await window.showOpenFilePicker();`: Kasutab `showOpenFilePicker()`-it faili valimise dialoogi kuvamiseks. Võtmesõna `await` peatab täitmise, kuni kasutaja valib faili (või tühistab toimingu). Tulemuseks on massiiv, mis sisaldab `FileSystemFileHandle` objekte; me destruktrueerime esimese elemendi muutujasse `fileHandle`.
• `const file = await fileHandle.getFile();`: Hangib `File` objekti `FileSystemFileHandle`-ist. See `File` objekt annab juurdepääsu faili omadustele ja sisule.
• `const contents = await file.text();`: Loeb kogu faili sisu tekstistringina, kasutades `text()` meetodit. Võtmesõna `await` ootab faili lugemise operatsiooni lõpuleviimist.
• `console.log(contents);`: Logib faili sisu konsooli.
• `} catch (err) { ... }`: Püüab kinni kõik vead, mis võivad tekkida faili avamise või lugemise protsessi käigus. See logib vea nime ja sõnumi konsooli silumise eesmärgil. See on ülioluline stsenaariumide käsitlemiseks, kus kasutaja tühistab faili valiku, fail ei ole kättesaadav või esineb probleeme faili sisu lugemisega.

showSaveFilePicker()

Meetod showSaveFilePicker() palub kasutajal valida faili salvestamise asukoha. See tagastab promise'i, mis laheneb FileSystemFileHandle objektiga, mis esindab valitud faili.

            
async function saveFile(data) {
  try {
    const fileHandle = await window.showSaveFilePicker({
      suggestedName: 'my-file.txt',
      types: [{
        description: 'Text files',
        accept: {
          'text/plain': ['.txt'],
        },
      }],
    });
    const writable = await fileHandle.createWritable();
    await writable.write(data);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

Näite selgitus:

• `async function saveFile(data) { ... }`: Määratleb asünkroonse funktsiooni `saveFile`, mis võtab argumendiks `data` (salvestatav sisu).
• `const fileHandle = await window.showSaveFilePicker({ ... });`: Kutsub välja `showSaveFilePicker()`-i salvestamise dialoogi kuvamiseks. Võtmesõna `await` tagab, et funktsioon ootab kasutaja interaktsiooni. * `suggestedName: 'my-file.txt'` soovitab vaikenime. * `types: [...]` määrab failitüüpide filtrid: * `description: 'Text files'` pakub kasutajasõbralikku kirjeldust failitüübi kohta. * `accept: { 'text/plain': ['.txt'] }` näitab, et dialoog peaks filtreerima `.txt` faile MIME-tüübiga `text/plain`.
• `const writable = await fileHandle.createWritable();`: Loob `FileSystemWritableFileStream`-i, mis on seotud failikäepidemega. See voog võimaldab andmeid faili kirjutada.
• `await writable.write(data);`: Kirjutab `data` (salvestatav sisu) kirjutatavasse voogu.
• `await writable.close();`: Sulgeb kirjutatava voo, tagades, et kõik andmed on faili kirjutatud ja fail on korralikult lõpetatud.
• `} catch (err) { ... }`: Sisaldab veakäsitlust, et püüda ja logida kõik vead, mis võivad salvestamise protsessi käigus tekkida.

2. Faili sisu lugemine

Kui teil on FileSystemFileHandle objekt, saate faili sisule juurde pääseda, kasutades meetodit getFile(). See tagastab File objekti, mis pakub meetodeid faili sisu lugemiseks teksti, binaarandmete või voona.

            
async function readFileContents(fileHandle) {
  const file = await fileHandle.getFile();
  const contents = await file.text();
  return contents;
}

            

              
                Copy
              
            
          

3. Failidesse kirjutamine

Faili kirjutamiseks peate looma FileSystemWritableFileStream objekti, kasutades FileSystemFileHandle objekti meetodit createWritable(). Seejärel saate kasutada meetodit write() andmete voogu kirjutamiseks ja meetodit close() voo sulgemiseks ja muudatuste salvestamiseks.

            
async function writeFileContents(fileHandle, data) {
  const writable = await fileHandle.createWritable();
  await writable.write(data);
  await writable.close();
}

            

              
                Copy
              
            
          

4. Kaustadele juurdepääs

File System Access API võimaldab ka kaustadele juurdepääsu taotleda. Seda tehakse meetodiga showDirectoryPicker().

            
async function openDirectory() {
  try {
    const directoryHandle = await window.showDirectoryPicker();
    console.log('directoryHandle', directoryHandle);
    // Now you can interact with the directoryHandle to list files, create new files, etc.
  } catch (err) {
    console.error(err.name, err.message);
  }
}

            

              
                Copy
              
            
          

Kui teil on FileSystemDirectoryHandle objekt, saate kasutada meetodeid nagu entries(), getFileHandle() ja getDirectoryHandle() kaustastruktuuris navigeerimiseks ning failidele ja alamkaustadele juurdepääsemiseks.

5. Origin Private File System (OPFS)

Origin Private File System (OPFS) on spetsiaalne, liivakastis olev osa failisüsteemist, mis on isoleeritud veebirakenduse päritolust. Failidele juurdepääs OPFS-is on optimeeritud jõudluse jaoks. Siin on, kuidas sellele juurde pääseda:

            
async function accessOPFS() {
  try {
    const root = await navigator.storage.getDirectory();
    console.log('OPFS root directory handle:', root);

    // Create a file in the OPFS
    const fileHandle = await root.getFileHandle('my-opfs-file.txt', { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write('This is data in the OPFS!');
    await writable.close();

    // Read the file back
    const file = await fileHandle.getFile();
    const contents = await file.text();
    console.log('Contents from OPFS file:', contents);
  } catch (err) {
    console.error('Error accessing OPFS:', err);
  }
}

accessOPFS();

            

              
                Copy
              
            
          

Selgitus:

• `navigator.storage.getDirectory()`: Hangib OPFS-i juurkausta käepideme. See on sisenemispunkt failidele juurdepääsemiseks päritolu privaatses failisüsteemis.
• `root.getFileHandle('my-opfs-file.txt', { create: true })`: Hangib failikäepideme failile nimega 'my-opfs-file.txt'. Valik `{ create: true }` tagab, et fail luuakse, kui seda veel ei eksisteeri.
• Ülejäänud kood demonstreerib andmete kirjutamist faili ja seejärel nende tagasi lugemist, sarnaselt varasematele näidetele.

Turvakaalutlused

File System Access API toob kaasa uusi turvakaalutlusi, millest arendajad peavad teadlikud olema:

• Kasutaja load: Taotlege alati ainult vajalikke lube ja selgitage kasutajale selgelt, miks teie rakendus vajab juurdepääsu nende failisüsteemile.
• Sisendi valideerimine: Puhastage ja valideerige kõik failidest loetud andmed, et vältida turvaauke, nagu saidiülene skriptimine (XSS) või koodi süstimine.
• Teekonna läbimine (Path Traversal): Olge failiteede koostamisel ettevaatlik, et vältida teekonna läbimise rünnakuid, kus ründaja võiks saada juurdepääsu failidele väljaspool ettenähtud kausta.
• Andmete tundlikkus: Olge teadlik käsitletavate andmete tundlikkusest ja võtke kasutusele asjakohased meetmed nende kaitsmiseks, näiteks krüpteerimine ja juurdepääsukontrollid.
• Vältige tundlike andmete salvestamist: Võimaluse korral vältige tundliku teabe salvestamist kasutaja failisüsteemi. Kaaluge brauseri salvestus-API-de (nagu IndexedDB) kasutamist andmete salvestamiseks brauseri liivakastis.

Brauseri ühilduvus

Brauserite tugi File System Access API-le on endiselt arenemas. Kuigi enamik kaasaegseid brausereid toetab API põhifunktsioone, võivad mõned funktsioonid olla eksperimentaalsed või nõuda spetsiifiliste lippude lubamist. Kontrollige alati uusimat brauseri ühilduvusteavet enne API kasutamist tootmises. Ajakohase ühilduvusteabe saamiseks võite viidata ressurssidele nagu MDN Web Docs.

Polüfillid ja varulahendused

Brauserite jaoks, mis ei toeta täielikult File System Access API-d, saate kasutada polüfille või varulahendusi, et pakkuda sujuvamat üleminekut. Näiteks võite kasutada traditsioonilist failide üles- ja allalaadimise mehhanismi varulahendusena brauseritele, mis ei toeta meetodeid showOpenFilePicker() või showSaveFilePicker(). Kaaluge ka oma rakenduse järkjärgulist täiustamist. Pakkuge põhifunktsionaalsust ilma API-ta, seejärel täiustage kogemust brauseritele, mis seda toetavad.

Näide: Lihtsa tekstiredaktori loomine

Siin on lihtsustatud näide, kuidas luua põhiline tekstiredaktor, kasutades File System Access API-d:

            
<textarea id="editor" style="width: 100%; height: 300px;"></textarea>
<button id="openBtn">Ava fail</button>
<button id="saveBtn">Salvesta fail</button>

            

              
                Copy
              
            
          

            
const editor = document.getElementById('editor');
const openBtn = document.getElementById('openBtn');
const saveBtn = document.getElementById('saveBtn');

let fileHandle;

openBtn.addEventListener('click', async () => {
  try {
    [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    editor.value = await file.text();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

saveBtn.addEventListener('click', async () => {
  try {
    if (!fileHandle) {
      fileHandle = await window.showSaveFilePicker();
    }
    const writable = await fileHandle.createWritable();
    await writable.write(editor.value);
    await writable.close();
  } catch (err) {
    console.error(err.name, err.message);
  }
});

            

              
                Copy
              
            
          

See näide demonstreerib, kuidas avada fail, kuvada selle sisu tekstialas ja salvestada muudatused tagasi faili. See on väga lihtne näide ja päris rakenduse jaoks vajaks see täiendavat veakäsitlust ja funktsioone.

Parimad tavad File System Access API kasutamisel

• Järkjärguline täiustamine: Disainige oma rakendus nii, et see töötaks ka ilma File System Access API-ta. Kasutage API-d kasutajakogemuse parandamiseks, kui see on saadaval.
• Andke selgeid selgitusi: Selgitage kasutajale selgelt, miks teie rakendus vajab juurdepääsu nende failisüsteemile ja mida te kavatsete failidega teha.
• Käsitlege vigu sujuvalt: Rakendage robustne veakäsitlus, et sujuvalt käsitleda stsenaariume, kus kasutaja keeldub loast, faili ei leita või esineb muid vigu.
• Kasutage asünkroonseid operatsioone: Kasutage alati asünkroonseid operatsioone, et vältida kasutajaliidese hangumist failisüsteemi interaktsioonide ajal.
• Optimeerige jõudlust: Kasutage suurte failide puhul voopõhist juurdepääsu, et parandada jõudlust ja vähendada mälukasutust.
• Austage kasutaja privaatsust: Olge teadlik kasutaja privaatsusest ja pääsege juurde ainult neile failidele ja kaustadele, mis on teie rakenduse toimimiseks vajalikud.
• Testige põhjalikult: Testige oma rakendust põhjalikult erinevates brauserites ja operatsioonisüsteemides, et tagada ühilduvus ja stabiilsus.
• Kaaluge Origin Private File System (OPFS) kasutamist: Jõudluskriitiliste operatsioonide, eriti suurte failidega seotud toimingute puhul, kaaluge OPFS-i kasutamist.

Kokkuvõte

File System Access API on võimas tööriist, mis annab frontend-arendajatele võimaluse luua täiustatud failisüsteemi võimekusega veebirakendusi. Lubades kasutajatel anda veebirakendustele juurdepääsu oma kohalikele failidele ja kaustadele, avab see API uusi võimalusi veebipõhistele tootlikkustööriistadele, loomingulistele rakendustele ja muule. Kuigi brauserite tugi on endiselt arenemas, kujutab File System Access API endast olulist sammu edasi veebiarenduse evolutsioonis. Kui brauserite tugi küpseb ja arendajad saavad API-ga rohkem kogemusi, võime oodata veelgi uuenduslikumaid ja köitvamaid veebirakendusi, mis kasutavad selle võimalusi.

Pidage meeles, et File System Access API kasutamisel tuleb alati eelistada kasutaja turvalisust ja privaatsust. Järgides parimaid tavasid ja kaaludes hoolikalt turvamõjusid, saate luua veebirakendusi, mis on nii võimsad kui ka turvalised.