Kuinka avata paikallisia tiedostoja selaimessa tiedosto:///-haulla

Selaimen käyttäminen pienenä tiedostoselaimena on mahdollista ja oikein käytettynä erittäin hyödyllistä. Yksinkertaisen paikallisen dokumentin avaamisesta file:///-metodilla tehokkaan File System Access API:n käyttöönNykypäivän selaimet tarjoavat paljon enemmän mahdollisuuksia kuin mitä yleensä käytämme.

Tässä oppaassa käymme läpi askel askeleelta, miten avata paikallisia tiedostoja web-selain file:///-n käyttäminen Chromessa, Edgessä ja FirefoxissaKuinka muuttaa selaimesi perustiedostojen hallintaohjelmaksi Windowsissa ja Androidissa, ja kuinka kehittäjät voivat mennä askeleen pidemmälle käyttämällä File System Access API:a paikallisten tiedostojen ja kansioiden lukemiseen, kirjoittamiseen ja hallintaan verkkosovelluksesta.

Mitä paikallisten tiedostojen avaaminen file:///-komennolla oikeastaan ​​tarkoittaa?

Kun kirjoitat reitin, joka alkaa file:/// selaimen osoiterivillä, Käsket selainta käyttämään paikallista tiedostojärjestelmää internetin sijaan.Eli avataksesi jotain omalla laitteellasi olevaa: kiintolevyä, sisäistä muistia tai SD-korttia.

Tämä erityinen URL-osoitejärjestelmä (file:///) Se toimii samalla tavalla kuin kirjoittaisit C: Windowsissa tai / Windowsissa Linux ja macOSSe on vain mukautettu selaimen logiikkaan. Näet sitten eräänlaisen luettelon kansioista ja tiedostoista ilman mitään hienouksia: nimiä, kokoja, muokkauspäivämääriä ja paljon muuta.

Tietysti se on otettava huomioon Selaimet käsittelevät näitä paikallisia reittejä monilla turvallisuusrajoituksilla.Esimerkiksi internetistä vierailemasi verkkosivusto ei voi oletusarvoisesti lukea paikallisia tiedostojasi vapaasti vain siksi, että avaat URL-osoitteen, jossa on file:///Käyttäjältä vaaditaan aina nimenomainen ele tai lupa.

Selaimen käyttäminen tiedostoselaimena Androidilla

Monissa Android-puhelimissa ei ole valmistajan tarjoamaa kunnollista tiedostonhallintaa, tai esiasennettu tiedostonhallinta on melko rajoitettu. Näissä tapauksissa Chromen, Edgen tai muun Chromium-pohjaisen selaimen käyttäminen väliaikaisena selaimena voi auttaa sinut pulasta..

Temppu on hyvin yksinkertainen: Avaa Chromium-pohjainen selaimesi (Chrome, Edge, Brave jne.) ja kirjoita osoiteriville tiedosto: /// sdcard /Android tunnistaa varastointi tärkein sisäinen as sdcard, hyvin samalla tavalla kuin Windows käyttää C:-asemaa pääasemana.

Kun käynnistät kyseisen osoitteen, selain yleensä pyytää lupaa lukea sisäistä tallennustilaa. Kun olet myöntänyt kyseisen käyttöoikeuden, näkyviin tulee hakemisto, joka näyttää sisäisen muistisi juurikansiot.Sieltä voit siirtyä kansioihin ja poistua niistä aivan kuin selaisit linkkejä sisältävää verkkosivustoa.

Jokaisessa kansiossa näet sekä alikansioita että tiedostoja. Tiedostot näytetään koko nimellään, mukaan lukien tiedostopääte, koko ja viimeisin muokkauspäivämäärä.Seuraavat on myös lueteltu: piilotetut kansiot, joka Androidissa yleensä alkaa pisteellä, kuten .nomedia tai muita vastaavia.

Vaikka lista on hyvin lyhytsanainen, Useimmat nykyaikaiset selaimet pystyvät avaamaan monentyyppisiä tiedostoja suoraan napauttamalla niitä.Kuvat, videot, äänitiedostot, tekstitiedostot jne. Pienoiskuvia tai esikatselukuvia ei ole, mutta tiedostonimen napsauttaminen saa selaimen yrittämään sen näyttämistä tai toistamista.

Tee Chromesta ja Edgestä pieni tiedostojen hallintaohjelma tietokoneellasi

Pöytätietokoneilla, sekä Windows- että muissa järjestelmissä, Voit myös käyttää Chromea, Edgeä ja muita Chromium-pohjaisia ​​selaimia paikallisten asemien selaamiseen file:///-komennolla.Periaate on sama kuin Androidissa, mutta polku on erilainen.

Jos käytät Windowsia, ensisijainen asema on yleisimmin C:. Tässä tapauksessa kirjoita osoiteriville tiedosto:///C: ja paina EnterSelain näyttää kyseisen aseman juurikansion sisällön: kansiot, kuten Windows, Program Files, Usuarios, Jne

Jos sinulla on useampia asemia tai osioita, Voit korvata URL-osoitteen kirjaimen vastaavalla kirjaimella.. Esimerkiksi file:///D: toiselle albumille tai file:///E: muistoksi USB että se liitettiin kyseisellä kirjaimella. Napsauta sieltä kansioita siirtyäksesi eteenpäin ja käytä selaimen takaisin-painiketta palataksesi takaisin.

Aivan kuten Androidilla, Jokaisessa kansiossa näet tiedostot ja alikansiot, joiden koko, muokkauspäivämäärä ja tiedostopääte näkyvät.Se ei luo pikkukuvia tai kauniita kuvakkeita, mutta se riittää tietyn tiedoston paikantamiseen tai hakemistorakenteen nopeaan yleiskatsaukseen.

Useimmat Chromium-selaimet Niiden avulla voit avata suoraan multimediatiedostoja ja jopa joitakin asiakirjamuotoja. Yksinkertaisesti napsauttamalla niitä. Kuvat, videot, ääni- tai pelkkätekstitiedostot näkyvät välilehdessä melko luonnollisesti.

Avaa paikallisia tiedostoja Chromessa ja Firefoxissa ilman file:///-näppäimiä manuaalisesti

Reittien kirjoittamisen lisäksi file:///Selaimissa on pikakuvakkeita, jotka on suunniteltu erityisesti paikallisten tiedostojen nopeaan avaamiseen. Esimerkiksi Chromessa voit käyttää pikanäppäintä Ctrl + O (Ctrl + O), kun selainikkuna on aktiivinen.

Painamalla kyseistä pikanäppäintä, Käyttöjärjestelmän tyypillinen "Avaa tiedosto" -valintaikkuna avautuuEtsi haluamasi tiedosto, valitse se ja vahvista. Chrome lataa sen nykyiseen välilehteen tai uuteen välilehteen tiedostotyypistä ja asetuksistasi riippuen.

Firefox tarjoaa useita vaihtoehtoja. Toisaalta, Voit mennä päävalikkoon ja valita vaihtoehdon "Avaa tiedosto..."joka tekee täsmälleen saman asian: näyttää järjestelmän tiedostovalintaikkunan. Vaihtoehtoisesti voit kirjoittaa polun suoraan osoiteriville: file:///// jotta selain käynnistyy näyttämällä C:-aseman sisällön Windowsissa.

Millä tahansa näistä menetelmistä, Käytännössä selaimesta tulee paikallinen tiedostojen katseluohjelma.Se voi auttaa sinua, kun Windowsin Resurssienhallinta Se jumiutuu, kun sinulla on ongelmia tavallisen tiedostonhallinnan kanssa tai yksinkertaisesti silloin, kun haluat avata sellaisen asiakirjan, jonka selain käsittelee erityisen hyvin.

Tiedostojärjestelmän käyttöoikeusrajapinta: loikka katseluohjelmasta editoriksi

Kaikki tähän mennessä näkemämme perustuu file:///-metodin ja tiedoston avaamisen valintaikkunoiden "manuaaliseen" käyttöön eli asioihin, jotka käyttäjä tekee manuaalisesti. Mutta Chromium-pohjaiset selaimet ovat jo jonkin aikaa sisällyttäneet tiedostojärjestelmän käyttöoikeusrajapinnan (File System Access API), mikä antaa verkkosovelluksille mahdollisuuden käsitellä paikallisia tiedostoja paljon edistyneemmällä tavalla.

Tämä API sallii verkkosivuston, pyydettyään lupaasi, Lue ja tallenna muutokset suoraan laitteesi tiedostoihin ja kansioihinTämän ansiosta vakavasti otettavia tekstieditorien ja IDE-ohjelmien luonti onnistuu suoraan selaimesta. ohjelmointi, kuvan- ja videonmuokkausohjelmia, projektipäälliköitä ja monia muita työkaluja, joiden kehittäminen aiemmin oli järkevää vain työpöytäsovelluksina.

On tärkeää olla sekoittamatta tätä modernia API:a vanhempiin tai vanhentuneisiin. Se ei ole sama kuin käyttöliittymä FileSystem eikä File and Directory Entries API eikä vanha ”File API: Directories and System” -spesifikaatio, jossa ehdotettiin muita mekanismeja tiedostohierarkioiden ja hiekkalaatikoiden tallennusalueiden käsittelyyn.

Nykyinen tiedostojärjestelmän käyttöoikeusrajapinta Se on suunniteltu erityistä huolellisuutta noudattaen turvallisuuden, käyttöoikeuksien ja käyttökokemuksen suhteen.Tiedosto- tai hakemistovalitsimen avaaminen vaatii aina nimenomaisia ​​toimia (kuten painikkeen napsauttamisen), ja käyttäjä tietää aina selvästi, mihin polkuihin hän myöntää käyttöoikeuden.

Mitä tulee yhteensopivuuteen, API toimii useimmissa Chromium-pohjaisissa selaimissa Windowsissa, macOS:ssä, Linuxissa, ChromeOS:ssä ja Androidissa.Merkittävä poikkeus on Brave, jossa lipun aktivointi on edelleen tarpeen sen käyttämiseksi. Muut kuin Chromium-selaimet eivät välttämättä toteuta sitä tai toteuttavat sen vain osittain.

Tarkista, tukeeko selain tiedostojärjestelmän käyttöoikeusrajapintaa (API)

Kehittäjänä sinun on ensin tiedettävä, tukeeko käyttäjän selain tätä API:a, ennen kuin yrität käyttää sitä. Yksinkertaisin tapa on tarkistaa, onko vastaavat tiedostonvalintametodit olemassa globaalissa objektissa.esimerkiksi tarkistamalla, jos showOpenFilePicker on saatavana kielellä window (o self työntekijässä).

Tyypillinen kuvio koostuu jostain tällaisesta: "Jos 'showOpenFilePicker' on asetettu arvoon self, voin käyttää API:a; muuten minun on turvauduttava vaihtoehtoiseen menetelmään."Tämä mahdollistaa hybridiratkaisujen toteuttamisen, joissa hyödynnetään API:n etuja, jos tukea on, ja jos tukea ei ole, käytetään perinteisiä tekniikoita, kuten tiedostojen latauslomakkeita.

Se on myös hyvä idea Testaa kohdeselaimissa ja eri selaimissa käyttöjärjestelmätKoska vaikka pohjana on Chromium, jotkut valmistajat saattavat ottaa käyttöön tai poistaa käytöstä tiettyjä ominaisuuksia turvallisuus-, käytäntö- tai suorituskykysyistä.

Ensimmäinen esimerkki: paikallisen tiedoston avaaminen verkkosovelluksesta

Yksi kaanonisista esimerkeistä tämän API:n ymmärtämiseksi on rakentaa yhden tiedoston tekstieditori, jonka avulla voit avata, muokata ja tallentaa dokumentinSen ei tarvitse olla näyttävä: niin kauan kuin se lukee ja kirjoittaa pelkkää tekstiä, se jo havainnollistaa, miten se toimii.

Lähtökohtana tässä on menetelmä window.showOpenFilePicker(). Tämä menetelmä, jota voidaan kutsua vain suojatussa kontekstissa (HTTPS) ja vastauksena käyttäjän eleeseenSe näyttää käyttäjälle natiivin valintaikkunan tiedoston valitsemiseksi. Valinnan jälkeen se palauttaa taulukon kahvoja, tyypillisesti yhdellä FileSystemFileHandle.

Tuo kahva tallentaa kaikki tiedot ja metodit, joita tarvitaan valitun tiedoston kanssa työskentelyyn. On hyvä idea tallentaa viittaus kahvaan, koska sitä käytetään myöhemmin tiedoston lukemiseen, muutosten tallentamiseen tai minkä tahansa muun toiminnon suorittamiseen.Niin kauan kuin säilytät kyseisen tunnuksen eikä käyttäjä ole peruuttanut käyttöoikeuksia, sovelluksesi voi olla vuorovaikutuksessa tiedoston kanssa.

Kun sinulla on FileSystemFileHandle, voit saada kohteen File todellinen kutsumus handle.getFile()Tämä objekti File Se sisältää tiedoston tiedot blob-yksikkönä, ja voit käyttää sen sisältöä esimerkiksi seuraavilla tavoilla: text(), arrayBuffer(), stream() o slice() jos tarvitset satunnaista pääsyä.

Käytännössä yksinkertaisessa tekstieditorissa tavallista on käyttää file.text() saadaksesi koko sisällön merkkijononaja laita tuo teksti johonkin <textarea> jotta käyttäjä voi muokata sitä. On tärkeää huomata, että objekti File Se lakkaa olemasta voimassa, jos tiedostoa muokataan levyllä jollain muulla tavalla, jolloin on suositeltavaa kutsua sitä uudelleen. getFile().

Tallenna muutokset: kirjoita paikalliseen tiedostojärjestelmään

Käyttäjän muokkaamien tietojen tallentamiseksi API tarjoaa kaksi tyypillistä polkua: "yksinkertainen" tallennus, joka korvaa alkuperäisen tiedoston, ja "Tallenna nimellä" -toiminto, joka luo uuden tiedostonPerustava ero on siinä, onko sinulla jo kahva kohdetiedostoon vai haluatko käyttäjän valitsevan uuden polun ja nimen.

Kun haluat luoda uuden tiedoston tai tallentaa kopion eri nimellä, sinun pitäisi käyttää showSaveFilePicker()Tämä menetelmä avaa tiedostovalitsimen tallennustilassa, jolloin käyttäjä voi määrittää nimen, kansion ja tiedostopäätteen. Voit tarjota vaihtoehtoja tiedostotyyppien ehdottamiseksi, esimerkiksi osoittamalla, että kyseessä on tekstidokumentti ja että ensisijainen tiedostopääte on . .txt.

Tärkeä yksityiskohta on se Sinun pitäisi soittaa showSaveFilePicker() suoraan vastauksena käyttäjän eleeseen (esimerkiksi napsauttamalla "Tallenna"-painiketta) äläkä viivyttele sitä, kun olet tekemässä raskasta prosessointia. Jos teet kaikki alustavat työt ja yrität sitten avata valintaikkunan viiveellä, selain saattaa antaa tietoturvavirheen, koska se ei enää pidä "käyttäjän elettä käsittelevänä".

Kun sinulla on FileSystemFileHandle osoittamalla tiedostoa, johon haluat tallentaa, Seuraava vaihe on luoda FileSystemWritableFileStream käyttäen fileHandle.createWritable()Tätä striimiä käytät datan kirjoittamiseen. Jos selain havaitsee, että sinulla ei vielä ole kirjoitusoikeutta, se näyttää käyttöoikeusvalintaikkunan. Jos käyttäjä hylkää kirjoitusoikeudet, kutsu aiheuttaa poikkeuksen.

Puro kädessä, Soitat vain writable.write(contenido) narulla, möykkyllä ​​tai BufferSourceVoit jopa suoraan syöttää HTTP-vastauksen rungon striimiin käyttämällä response.body.pipeTo(writable)Kun olet kirjoittanut, suljet lähetyksen painamalla writable.close(), joka on hetki, jolloin muutokset yhdistetään levylle.

Striimin ollessa auki voit käyttää myös menetelmiä, kuten seek() o truncate() ja siirrä kirjoitusosoitin tiettyyn kohtaan tai muuta tiedostokokoaMutta on tärkeää muistaa, että muutoksia ei oteta pysyvästi käyttöön ennen kuin striimi suljetaan.

Ehdota käyttäjälle tiedostonimeä ja kotikansiota

API huolehtii myös käyttäjäkokemuksesta järjestelmän valintaikkunoissa. Esimerkiksi Voit määrittää ehdotetun tiedostonimen kutsuessasi showSaveFilePicker()Näin käyttäjä voi nähdä kuvaavamman tekstin, kuten "Uusi dokumentti.txt", yleisen "Ei otsikkoa" -tekstin sijaan.

Vastaavasti, Voit ehdottaa aloituskansiota, josta tiedostonvalitsin käynnistyy.Tämä tehdään ohittamalla ominaisuus startIn kun soitat showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Arvot voivat olla merkkijonoja, kuten desktop, documents, downloads, music, pictures o videos, jotka vastaavat järjestelmän vakiosijainteja.

Lisäksi sinulla on mahdollisuus käytä arvona startIn tiedosto- tai hakemistohallintaohjelma, joka sinulla jo onTässä tapauksessa valintaikkuna avautuu suoraan kansioon, jossa kyseinen kahva sijaitsee, mikä on erittäin kätevää edellisen istunnon työympäristön palauttamiseksi.

Jos sovelluksesi käsittelee erityyppisiä tiedostoja (esimerkiksi tekstiasiakirjoja ja upotettuja kuvia), Voit määrittää eri tunnukset kullekin valintaikkunatyypilleTällä tavoin selain muistaa viimeksi käytetyn kansion erikseen kullekin tunnukselle, etkä sekoita dokumentti- ja kuvapolkuja.

Muista viimeisimmät tiedostot ja kansiot IndexedDB:n avulla

Yksi File System Accessin vahvuuksista on, että sen käsittelijät ovat sarjoitettavissa. Tämä tarkoittaa, että voit tallentaa FileSystemFileHandle y FileSystemDirectoryHandle IndexedDB:ssä ja noutaa ne seuraavissa istunnoissa aina käyttöoikeuskäytäntöä noudattaen.

Tämän ansiosta verkkosovellukset voivat tarjota tyypillisiä työpöytätoimintoja, kuten viimeisimpien tiedostojen luettelot, viimeisimmän projektin uudelleenavaaminen tai edellisen työkansion palauttaminenSinun tarvitsee vain tallentaa kahvat selaimen tietokantaan ja lukea ne sovelluksen käynnistyessä.

Kun haet tallennetun kahvan, Älä oleta, että luvat pysyvät voimassa.Selain saattaa päättää, että valtuutusta on pyydettävä uudelleen, esimerkiksi koska aikaa on kulunut tai lähteen viimeinen välilehti on suljettu. Siksi on suositeltavaa, että koodisi tarkistaa tämän.

Tätä tarkistusta varten API sisältää metodit queryPermission() y requestPermission() sekä tiedosto- että hakemistokäsittelijöissäEnsin kysyt, missä tilassa käyttöoikeus on, ja jos se ei ole "myönnetty", voit pyytää sitä uudelleen käyttäjältä ja ilmoittaa vaihtoehdoista, tarvitsetko vain luku- vai luku- ja kirjoitusoikeuden.

Hyvä käytäntö on yhdistää molemmat vaiheet yhdeksi ohjefunktioksi Kun annetaan kahva ja tila (vain luku tai luku/kirjoitus), sen tulisi tarkistaa, onko käyttöoikeus jo myönnetty, ja jos ei, näyttää vastaava kehote. Tämä vähentää valintaikkunoiden määrää ja tekee käyttökokemuksesta sujuvamman.

Avaa ja selaa kokonaisia ​​hakemistoja selaimessa

Yksittäisten tiedostojen lisäksi API mahdollistaa työskentelyn kokonaisten kansioiden kanssa. kanssa showDirectoryPicker() käyttäjä voi valita koko hakemistonja hakemus vastaanottaa FileSystemDirectoryHandle joka antaa pääsyn kaikkiin sen elementteihin.

Oletusarvoisesti sinulla on lukuoikeudet kyseisen hakemiston tiedostoihin, mutta jos sinun on myös kirjoitettava niihin Voit pyytää luku- ja kirjoitusoikeuksia antamalla { mode: 'readwrite' } soittaessa showDirectoryPicker()Siitä hetkestä lähtien sovelluksesi voi listata ja muokata sisältöä myönnettyjen käyttöoikeuksien mukaisesti.

Voit selata kansiota seuraavasti: Voit iteroida asynkronisesti yli dirHandle.values()joka palauttaa yksi kerrallaan sen sisältämät elementit: tiedostot ja alihakemistot. Jokaisella merkinnällä on ominaisuus kind joka kertoo, onko kyseessä "file" tai "directory".

Jos sinun on saatava tietoja kustakin tiedostosta, kuten sen koosta, voit soittaa entry.getFile(). Näissä tapauksissa on suositeltavaa suorittaa mittaukset rinnakkain käyttämällä Promise.all() tai vastaavia tekniikoita, sen sijaan, että edettäisiin yksi kerrallaan täysin peräkkäin, mikä voi olla hitaampaa.

Voit tehdä tämän myös hakemistosta luo uusia kansioita tai tiedostoja getDirectoryHandle() y getFileHandle()Voit määrittää asetuksissa, haluatko luoda ne, jos niitä ei vielä ole olemassa. Voit esimerkiksi määrittää projektirakenteen, kuten "Oma projekti / Koodi / Muistiinpanot.txt", suoraan verkkosovelluksesta.

Tiedostojen hallinta: poista, nimeä uudelleen ja siirrä

API ei rajoitu lukemiseen ja kirjoittamiseen. Sen avulla voit myös poistaa tiedostoja ja kansioita hakemistosta käyttämällä removeEntry() yli FileSystemDirectoryHandleJos kyseessä on kansio, voit tehdä poistosta rekursiivisen, jolloin se sisältää kaikki sen alikansiot ja tiedostot.

Jos haluat toimia suoraan tiedosto- tai kansiotunnisteen kanssa hakemiston läpikäymisen sijaan, Jotkin selaimet tarjoavat tämän menetelmän remove() en FileSystemFileHandle y FileSystemDirectoryHandleTällä tavoin poistat kyseisen elementin ilman, että sinun tarvitsee viitata sen nimeen päähakemistossa.

Organisointitoiminnoissa, kuten kohteiden uudelleennimeämisessä tai siirtämisessä toiseen kansioon, On olemassa menetelmä move() käyttöliittymässä FileSystemHandleVoit antaa sille suoraan uuden nimen, kohdehakemiston tai hakemiston ja uuden nimen siirtääksesi ja nimetäksesi sen uudelleen samanaikaisesti.

Yhteensopivuudessa on kuitenkin vivahteita: - tuki move() Se on kypsempi tiedostoille lähdekoodin yksityisen tiedostojärjestelmän (OPFS) sisällä.ja se voi silti olla lippujen takana tai sitä ei ole toteutettu kaikissa tilanteissa tai tiettyjen selainten hakemistoissa.

Vedä ja pudota tiedostoja ja kansioita verkkoon

Tiedostojärjestelmän käyttöliittymärajapinta integroituu erittäin hyvin HTML:n vedä ja pudota -järjestelmään. Kun käyttäjä vetää tiedostoja tai kansioita käyttöjärjestelmästä verkkosivulleselain luo elementtejä DataTransferItem yhteistyökumppaneita.

Menetelmän avulla DataTransferItem.getAsFileSystemHandle(), voit saada FileSystemFileHandle onko elementti tiedosto vai FileSystemDirectoryHandle jos se on hakemistoNäin ollen sovellus voi antaa käyttäjän vetää ja pudottaa kokonaisen valokuvakansion ja työskennellä suoraan sen sisällön parissa.

Sinun tulisi pitää mielessä, että vetämällä ja pudottamalla DataTransferItem.kind Sekä tiedostoille että kansioille on aina "tiedosto".Tiedoston ja hakemiston välisen eron selvität tarkistamalla ominaisuuden kind ja FileSystemHandle joka antaa sinulle takaisin getAsFileSystemHandle()joka erottaa toisistaan "file" y "directory".

Yksityinen lähdekooditiedostojärjestelmä (OPFS) ja optimoitu käyttöoikeus

Käyttäjän tiedostojen ja kansioiden käyttöoikeuden lisäksi Chromium-selaimet tarjoavat alkuperän yksityinen tiedostojärjestelmä (OPFS)Tämä on kullekin verkkosivustolle oma tallennustila, johon käyttäjä ei pääse suoraan käyttöjärjestelmästä.

Käytännössä tämä tarkoittaa sitä Vaikka selain tallentaa nämä tiedot sisäisesti levylle, käyttäjä ei löydä niitä "normaaleina" tiedostoina mistään vanhasta kansiosta.Tämä voi olla tietokanta, pakatut tiedostot tai mikä tahansa sisäinen rakenne, jonka selain katsoo sopivaksi.

API:n kautta voit käyttää tämän yksityisen järjestelmän juurta käyttämällä navigator.storage.getDirectory(), joka palauttaa FileSystemDirectoryHandle. Sieltä käsin voit luoda tiedostoja ja hakemistoja, lukea niitä, kirjoittaa niihin, nimetä niitä uudelleen tai poistaa niitä aivan kuin ne olisivat osa paikallista tiedostojärjestelmää.Mutta tietäen, että ne ovat erillisiä ja omistettu yksinomaan verkkosovelluksellesi.

Edistyneempiä suorituskykyvaatimuksia varten Chromium sisältää erityisen tiedostotyypin, jolla on optimoitu synkroninen käyttöoikeus.. kautta fileHandle.createSyncAccessHandle() (saatavilla työkielissä), voit hankkia kahvan, joka mahdollistaa synkronisen ja eksklusiivisen lukemisen ja kirjoittamisen, mikä on hyödyllistä erittäin intensiivisissä tai viiveherkissä käyttötapauksissa.

Kahvan hankkiminen on edelleen asynkronista, mutta kun se on saatu, Luku- ja kirjoitusoperaatiot suoritetaan suorina kutsuina, jotka käsittelevät tavupuskureita.Tämä on hyvin lähellä natiivisovelluksen suorituskykyä, mutta ilman, että se poistuu verkkoympäristöstä ja pysyy erillään yksityisestä lähdekoodijärjestelmästä.

Polyfillit ja vaihtoehdot, kun natiivia tukea ei ole

Vaikka tiedostojärjestelmän käyttöoikeusrajapinta tarjoaa monia mahdollisuuksia, Kaikki selaimet eivät vielä tue sitäTäydellisen polyfillin luominen, joka toistaa kaikki sen ominaisuudet, ei ole mahdollista, pääasiassa siksi, että natiivin tiedostojärjestelmän käyttöä ei voida simuloida luotettavasti ilman selaimen omaa yhteistyötä.

Joitakin osia voidaan kuitenkin arvioida. Jäljitellä showOpenFilePicker() yksinkertainen <input type="file">, joka näyttää tiedostovalintaruudun ja antaa käyttäjän valita yhden tai useamman tiedoston.

Jotain vastaavaa tapahtuu säästämisen kanssa. Jäljitellä showSaveFilePicker() linkkiä käytetään usein <a download="nombre"> Klikkaamalla sitä aloitetaan JavaScriptistä luodun Blob-objektin lataus. Tämä antaa sinun "tallentaa" verkkosivuston luomia tietoja, vaikka se ei tarjoakaan mahdollisuutta korvata olemassa olevia tiedostoja.

Kokonaisten hakemistojen valitsemisesta epästandardia attribuuttia on perinteisesti käytetty webkitdirectory en <input type="file">jonka avulla voit valita kansion ja saada luettelon sen sisältämistä tiedostoista. Se ei ole universaali ratkaisu eikä yhtä tehokas kuin showDirectoryPicker()mutta se kattaa joitakin tapauksia.

Näiden lähestymistapojen yhdistämiseksi Kirjakauppoja on mm. browser-fs-access He yrittävät käyttää modernia API:a aina kun se on saatavilla, ja jos ei, he turvautuvat automaattisesti näihin parempiin vaihtoehtoihin.Tällä tavoin kehittäjä kirjoittaa suhteellisen yhtenäistä koodia ja kirjasto huolehtii sen mukauttamisesta ympäristöön.

Tietoturva, käyttöoikeudet ja käyttäjien hallinta

Kaikki tämä valta tuo mukanaan vastuuta, ja selaintiimit ovat tästä erittäin tietoisia. Tiedostojärjestelmän käyttöoikeusrajapinnan suunnittelussa on huomioitu kaksi periaatetta: käyttäjän hallinta ja läpinäkyvyys.Ei ole mitenkään mahdollista, että verkkosivusto voi salaa lukea puolta kiintolevyä.

Kun käyttäjä avaa tiedoston valintaruutujen avulla (joko lukeakseen tai tallentaakseen uuden), Se on ele, joka myöntää luku- tai kirjoitusoikeuden tiettyyn tiedostoon tai kansioon.Jos käyttäjä muuttaa mielensä ja peruuttaa dialogin, verkkosivusto ei saa mitään eikä siten saa käyttöoikeutta.

Tallenna uusi tiedosto napsauttamalla "Tallenna"-ruutua Se ei ainoastaan ​​anna sinun valita nimeä ja polkua, vaan toimii myös kirjoitusoikeuden myöntämisenä kyseiseen juuri luotuun tiedostoon.Logiikka on sama kuin mitä on käytetty vuosia esimerkiksi seuraavissa elementeissä: <input type="file">mutta laajennettuna uusilla ominaisuuksilla.

Kun verkkosovellus haluaa muokata jo olemassa olevaa tiedostoa, Se ei voi noin vain tehdä niin; selain saattaa näyttää erityisen ilmoituksen, jossa pyydetään lupaa kirjoittaa siihen.Tämä valintaikkuna voidaan avata vain käyttäjän toimesta, kuten painamalla "Tallenna muutokset" -painiketta.

Jos käyttäjä päättää olla myöntämättä kyseistä kirjoitusoikeutta, Verkkosivuston on tarjottava jokin vaihtoehto: kopion lataaminen, tallentaminen pilveen, työskentely OPFS:ssä tai muu vastaava mekanismi.Ajatuksena on, että käyttäjällä on aina lopullinen sananvalta siitä, mihin hänen paikallisessa järjestelmässään kosketaan.

Läpinäkyvyyden osalta Selaimet näyttävät kuvakkeen osoiterivillä, kun verkkosivustolla on pääsy paikallisiin tiedostoihinJos käyttäjä napsauttaa kuvaketta, hän näkee luettelon tiedostoista tai kansioista, joihin sivulla on kulloinkin käyttöoikeus, ja voi peruuttaa käyttöoikeudet milloin tahansa.

Luvat eivät ole pysyviä. Yleensä sivu säilyttää tiedostojen tallentamisen mahdollisuuden vain niin kauan kuin vähintään yksi kyseisen lähteen välilehti on auki.Kun kaikki ne on suljettu, selain saattaa katsoa istunnon päättyneeksi ja seuraavalla käyttökerralla on pyydettävä lupaa uudelleen kyseisille tiedostoille tai hakemistoille.

Yhdistämällä file:///-skeeman tiettyjen resurssien avaamiseksi pikanäppäimet paikallisten tiedostojen lataamiseen ja tiedostojärjestelmän käyttöliittymän (File System Access API) syväintegraatioita varten Tämä tekee selaimesta paljon monipuolisemman työkalun sekä käyttäjille että kehittäjille.jonka avulla voit nopeasti katsella levylle tallennettua videota tai muokata kokonaisia ​​projekteja poistumatta verkkoympäristöstä.