File System Standard, एक ऑरिजिन प्राइवेट फ़ाइल सिस्टम (ओपीएफ़एस) को उस स्टोरेज एंडपॉइंट के तौर पर पेश करता है जो पेज के ऑरिजिन के लिए निजी होता है. यह फ़ाइल, उपयोगकर्ता को नहीं दिखती जो परफ़ॉर्मेंस के लिए ज़्यादा ऑप्टिमाइज़ की गई खास तरह की फ़ाइल का वैकल्पिक ऐक्सेस देती है.
ब्राउज़र समर्थन
ऑरिजिन निजी फ़ाइल सिस्टम, मॉडर्न ब्राउज़र पर काम करता है. साथ ही, इसे फ़ाइल सिस्टम लिविंग स्टैंडर्ड के वेब हाइपरटेक्स्ट ऐप्लिकेशन टेक्नोलॉजी वर्किंग ग्रुप (WHATWG) के मानकों के मुताबिक बनाया गया है.
वजह
अपने कंप्यूटर पर मौजूद फ़ाइलों के बारे में बात करते समय, हो सकता है कि आपका ध्यान फ़ाइल के क्रम में हो: फ़ोल्डर में रखी गई फ़ाइलें, जिन्हें अपने ऑपरेटिंग सिस्टम के फ़ाइल एक्सप्लोरर की मदद से एक्सप्लोर किया जा सकता है. उदाहरण के लिए, Windows पर रमेश नाम के उपयोगकर्ता की 'काम की सूची' C:\Users\Tom\Documents\ToDo.txt में हो सकती है. इस उदाहरण में, ToDo.txt फ़ाइल का नाम है और Users, Tom, और Documents फ़ोल्डर के नाम हैं. Windows पर `C:`, ड्राइव की रूट डायरेक्ट्री दिखाता है.
वेब पर फ़ाइलों के साथ काम करने का पारंपरिक तरीका
किसी वेब ऐप्लिकेशन में काम की सूची में बदलाव करने के लिए, यह एक सामान्य फ़्लो है:
- उपयोगकर्ता, फ़ाइल को किसी सर्वर पर अपलोड करता है या
<input type="file">का इस्तेमाल करके उसे क्लाइंट पर खोलता है. - उपयोगकर्ता अपने बदलाव करता है और फिर नतीजे वाली फ़ाइल को इंजेक्ट किए गए
<a download="ToDo.txt>के साथ डाउनलोड करता है, जिसे आप JavaScript की मदद से, प्रोग्राम के हिसाब सेclick()करते हैं. - फ़ोल्डर खोलने के लिए,
<input type="file" webkitdirectory>में एक खास एट्रिब्यूट का इस्तेमाल किया जाता है. इस एट्रिब्यूट का मालिकाना हक होने के बावजूद, यह ब्राउज़र पर काम करती है और इसे दुनिया भर में इस्तेमाल करती है.
वेब पर फ़ाइलों पर काम करने का आधुनिक तरीका
यह फ़्लो इस बारे में नहीं बताता कि उपयोगकर्ता फ़ाइलों में बदलाव करने के बारे में क्या सोचते हैं. इसका मतलब है कि उपयोगकर्ताओं को अपनी इनपुट फ़ाइलों की डाउनलोड की गई कॉपी मिल जाती हैं. इसलिए, File System Access API ने तीन पिकर तरीके इस्तेमाल किए हैं—showOpenFilePicker(), showSaveFilePicker(), और showDirectoryPicker()—जो उनके नाम से ठीक तरह से काम करते हैं. इनसे किसी फ़्लो को इस तरह चालू किया जाता है:
ToDo.txtकोshowOpenFilePicker()से खोलें और कोईFileSystemFileHandleऑब्जेक्ट पाएं.FileSystemFileHandleऑब्जेक्ट से, फ़ाइल हैंडल केgetFile()तरीके को कॉल करकेFileपाएं.- फ़ाइल में बदलाव करें. इसके बाद, हैंडल पर
requestPermission({mode: 'readwrite'})को कॉल करें. - अगर उपयोगकर्ता अनुमति का अनुरोध स्वीकार कर लेता है, तो बदलावों को वापस ओरिजनल फ़ाइल में सेव करें.
- इसके अलावा,
showSaveFilePicker()पर कॉल करके उपयोगकर्ता को नई फ़ाइल चुनने की अनुमति भी दी जा सकती है. (अगर उपयोगकर्ता कोई पहले खोली गई फ़ाइल चुनता है, तो उसकी सामग्री ओवरराइट हो जाएगी.) बार-बार सेव करने के लिए, फ़ाइल का हैंडल आस-पास रखा जा सकता है, ताकि आपको फ़ाइल सेव करने का डायलॉग फिर से न दिखाना पड़े.
वेब पर फ़ाइलों के साथ काम करने से जुड़ी पाबंदियां
इन तरीकों से ऐक्सेस की जा सकने वाली फ़ाइलों और फ़ोल्डर को उपयोगकर्ता को दिखने वाला फ़ाइल सिस्टम कहा जा सकता है. वेब से सेव की गई फ़ाइलों और खास तौर पर एक्ज़ीक्यूटेबल फ़ाइलों पर, वेब का निशान लगा होता है. इसलिए, किसी खतरनाक फ़ाइल के चलने से पहले, ऑपरेटिंग सिस्टम पर एक और चेतावनी दी जा सकती है. सुरक्षा की एक अतिरिक्त सुविधा के तौर पर, वेब से मिलने वाली फ़ाइलों को सुरक्षित ब्राउज़िंग की मदद से भी सुरक्षित किया जाता है. इस सुविधा को आसान बनाने और इस लेख के संदर्भ में, इसे क्लाउड-आधारित वायरस स्कैन माना जा सकता है. जब File System Access API का इस्तेमाल करके, किसी फ़ाइल में डेटा लिखा जाता है, तो वह सही जगह पर नहीं होता है. हालांकि, वह अस्थायी फ़ाइल का इस्तेमाल करता है. इस फ़ाइल में तब तक बदलाव नहीं किया जाता, जब तक वह सुरक्षा से जुड़ी सभी जांच पास नहीं कर लेती. जैसा कि आप कल्पना कर सकते हैं, जहां संभव है वहां सुधार लागू होने के बावजूद, इस काम की वजह से फ़ाइल का काम बहुत धीमा हो जाता है, जैसे कि macOS पर. अब भी हर write() कॉल अपने-आप में पूरा होता है, इसलिए हुड के नीचे यह फ़ाइल खोलता है, दिए गए ऑफ़सेट को खोजता है, और आखिर में डेटा लिखता है.
प्रोसेसिंग के आधार के रूप में फ़ाइलें
साथ ही साथ, फ़ाइलें डेटा रिकॉर्ड करने का बेहतरीन तरीका हैं. उदाहरण के लिए, SQLite पर सभी डेटाबेस एक ही फ़ाइल में सेव किए जाते हैं. इमेज प्रोसेसिंग में इस्तेमाल किए जाने वाले मिपमैप भी इसका एक उदाहरण हैं. मिपमैप, इमेज के ऑप्टिमाइज़ किए गए और पहले से कैलकुलेट किए गए क्रम होते हैं. हर इमेज में, इमेज के पिछले रिज़ॉल्यूशन का रिज़ॉल्यूशन पहले के मुकाबले कम होता है. इससे तेज़ी से ज़ूम करने जैसे कई काम किए जा सकते हैं. तो वेब ऐप्लिकेशन को वेब-आधारित फ़ाइल प्रोसेसिंग की प्रदर्शन लागतों के बिना, फ़ाइलों के फ़ायदे कैसे मिल सकते हैं? इसका जवाब है, ऑरिजिन प्राइवेट फ़ाइल सिस्टम.
उपयोगकर्ता को दिखने वाला ऑरिजिन निजी फ़ाइल सिस्टम बनाम
ऑपरेटिंग सिस्टम के फ़ाइल एक्सप्लोरर का इस्तेमाल करके, उपयोगकर्ता को दिखने वाला फ़ाइल सिस्टम ब्राउज़ किया जाता है, जबकि फ़ाइलों और फ़ोल्डर को पढ़ने, लिखने, एक जगह से दूसरी जगह ले जाने, और उनका नाम बदलने के लिए, ऑरिजिन निजी फ़ाइल सिस्टम उपयोगकर्ताओं को नहीं दिखता है. जैसा कि नाम से पता चलता है, ऑरिजिन के निजी फ़ाइल सिस्टम में मौजूद फ़ाइलें और फ़ोल्डर, निजी होते हैं. साथ ही, साइट के ऑरिजिन के लिए ही होते हैं. DevTools कंसोल में location.origin टाइप करके, पेज का ऑरिजिन पता करें. उदाहरण के लिए, https://developer.chrome.com/articles/ पेज का ऑरिजिन https://developer.chrome.com है (इसका मतलब है कि /articles, ऑरिजिन का हिस्सा नहीं है). ऑरिजिन ऑफ़ ऑरिजिन के बारे में ज़्यादा जानने के लिए, "same-site" और "same-origin" को समझना पढ़ें. एक ही ऑरिजिन को शेयर करने वाले सभी पेज, एक ही ऑरिजिन का निजी फ़ाइल सिस्टम डेटा देख सकते हैं. इसलिए, https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/ वही जानकारी देख सकता है जो पिछले उदाहरण में दी गई थी. हर ऑरिजिन का अपना अलग ऑरिजिन वाला निजी फ़ाइल सिस्टम होता है. इसका मतलब है कि https://developer.chrome.com का ऑरिजिन निजी फ़ाइल सिस्टम, https://web.dev जैसे ऑरिजिन से पूरी तरह अलग होता है. Windows पर, उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम की रूट डायरेक्ट्री C:\\ है.
ऑरिजिन निजी फ़ाइल सिस्टम, हर ऑरिजिन के लिए शुरुआती तौर पर खाली रूट डायरेक्ट्री होता है. इसे एसिंक्रोनस तरीके navigator.storage.getDirectory() को कॉल करके ऐक्सेस किया जाता है.
उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम और ऑरिजिन निजी फ़ाइल सिस्टम की तुलना के लिए, नीचे दिया गया डायग्राम देखें. इस डायग्राम में दिखाया गया है कि रूट डायरेक्ट्री के अलावा, बाकी सब कुछ सैद्धांतिक रूप से एक जैसा होता है. इसमें फ़ाइलों और फ़ोल्डर की हैरारकी होती है, ताकि उन्हें अपने डेटा और स्टोरेज की ज़रूरतों के हिसाब से व्यवस्थित और व्यवस्थित किया जा सके.
ऑरिजिन निजी फ़ाइल सिस्टम की खास जानकारी
ब्राउज़र में, स्टोरेज के अन्य तरीकों (उदाहरण के लिए, localStorage या IndexedDB) की तरह ही, ओरिजनल फ़ाइल सिस्टम पर भी ब्राउज़र कोटा की पाबंदियां लागू होती हैं. जब कोई उपयोगकर्ता सारा ब्राउज़िंग डेटा मिटाता है या साइट का पूरा डेटा मिटा देता है, तो उसका ऑरिजिन निजी फ़ाइल सिस्टम भी मिट जाएगा. navigator.storage.estimate() को कॉल करें और नतीजे में मिलने वाले रिस्पॉन्स ऑब्जेक्ट में, usage एंट्री देखें. इससे यह पता चलता है कि आपके ऐप्लिकेशन ने पहले से कितना स्टोरेज का इस्तेमाल किया है. यह डेटा, usageDetails ऑब्जेक्ट में स्टोरेज के तरीके के हिसाब से अलग-अलग होता है, जहां आपको खास तौर पर fileSystem एंट्री देखनी होती है. ऑरिजिन का निजी फ़ाइल सिस्टम उपयोगकर्ता को नहीं दिखता है, इसलिए अनुमति से जुड़े अनुरोध और सुरक्षित ब्राउज़िंग की जांच नहीं की जाती हैं.
रूट डायरेक्ट्री का ऐक्सेस पाना
रूट डायरेक्ट्री का ऐक्सेस पाने के लिए, नीचे दिया गया कमांड चलाएं. आखिर में आपकी डायरेक्ट्री वाला हैंडल खाली हो जाता है. खास तौर पर, यह एक FileSystemDirectoryHandle है.
const opfsRoot = await navigator.storage.getDirectory();
// A FileSystemDirectoryHandle whose type is "directory"
// and whose name is "".
console.log(opfsRoot);
मुख्य थ्रेड या वेब वर्कर
ऑरिजिन निजी फ़ाइल सिस्टम का इस्तेमाल करने के दो तरीके हैं: मुख्य थ्रेड पर या किसी वेब वर्कर पर. वेब वर्कर, मुख्य थ्रेड को ब्लॉक नहीं कर सकते. इसका मतलब है कि इस कॉन्टेक्स्ट में एपीआई सिंक्रोनस हो सकता है. यह ऐसा पैटर्न होता है जिसे आम तौर पर मुख्य थ्रेड पर अनुमति नहीं दी जाती. सिंक्रोनस एपीआई ज़्यादा तेज़ी से काम करता है, क्योंकि उसमें वादों को पूरा करने की ज़रूरत नहीं होती. साथ ही, फ़ाइल ऑपरेशन आम तौर पर C जैसी भाषाओं में सिंक्रोनस होते हैं, जिन्हें WebAssembly में कंपाइल किया जा सकता है.
// This is synchronous C code.
FILE *f;
f = fopen("example.txt", "w+");
fputs("Some text\n", f);
fclose(f);
अगर आपको फ़ाइल ऑपरेशन की सबसे तेज़ ज़रूरत है या आपने WebAssembly का इस्तेमाल किया है, तो सीधे किसी वेब वर्कर में ऑरिजिन निजी फ़ाइल सिस्टम का इस्तेमाल करें पर जाएं. अगर ऐसा नहीं है, तो आगे पढ़ें.
मुख्य थ्रेड पर, ऑरिजिन निजी फ़ाइल सिस्टम का इस्तेमाल करें
नई फ़ाइलें और फ़ोल्डर बनाना
रूट फ़ोल्डर बनाने के बाद, getFileHandle() और getDirectoryHandle() तरीकों का इस्तेमाल करके फ़ाइलें और फ़ोल्डर बनाएं. {create: true} को पास करने पर, फ़ाइल या फ़ोल्डर मौजूद न होने पर उसे बनाया जाएगा. नई बनाई गई डायरेक्ट्री का इस्तेमाल शुरुआती पॉइंट के तौर पर करके, इन फ़ंक्शन को कॉल करके फ़ाइलों का क्रम बनाएं.
const fileHandle = await opfsRoot
.getFileHandle('my first file', {create: true});
const directoryHandle = await opfsRoot
.getDirectoryHandle('my first folder', {create: true});
const nestedFileHandle = await directoryHandle
.getFileHandle('my first nested file', {create: true});
const nestedDirectoryHandle = await directoryHandle
.getDirectoryHandle('my first nested folder', {create: true});
मौजूदा फ़ाइलें और फ़ोल्डर ऐक्सेस करना
अगर आपको इन फ़ोल्डर का नाम पता है, तो getFileHandle() या getDirectoryHandle() का इस्तेमाल करके, पहले बनाई गई फ़ाइलें और फ़ोल्डर ऐक्सेस करें. साथ ही, फ़ाइल या फ़ोल्डर का नाम पास करें.
const existingFileHandle = await opfsRoot.getFileHandle('my first file');
const existingDirectoryHandle = await opfsRoot
.getDirectoryHandle('my first folder');
पढ़ने के लिए, फ़ाइल हैंडल से जुड़ी फ़ाइल फ़ेच की जा रही है
FileSystemFileHandle, फ़ाइल सिस्टम पर मौजूद किसी फ़ाइल को दिखाता है. संबंधित File पाने के लिए, getFile() तरीके का इस्तेमाल करें. File ऑब्जेक्ट, एक खास तरह का Blob होता है. इसका इस्तेमाल किसी भी ऐसे कॉन्टेक्स्ट में किया जा सकता है जिसे Blob कर सकता है. खास तौर पर, FileReader, URL.createObjectURL(), createImageBitmap(), और XMLHttpRequest.send(), Blobs और Files, दोनों को स्वीकार करते हैं. अगर आपको FileSystemFileHandle से File मिलेगा, तो वह डेटा "मुफ़्त" में मिलेगा, ताकि आप उसे ऐक्सेस कर सकें और उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम को उपलब्ध करा सकें.
const file = await fileHandle.getFile();
console.log(await file.text());
स्ट्रीम करके किसी फ़ाइल में लिखना
किसी फ़ाइल में डेटा स्ट्रीम करने के लिए, createWritable() को कॉल करें. इससे, कॉन्टेंट FileSystemWritableFileStream बन जाएगा और फिर कॉन्टेंट write() बन जाएगा. आख़िर में, आपको स्ट्रीम close() करनी होगी.
const contents = 'Some text';
// Get a writable stream.
const writable = await fileHandle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the stream, which persists the contents.
await writable.close();
फ़ाइलें और फ़ोल्डर मिटाना
फ़ाइल या फ़ोल्डर को मिटाने के लिए, फ़ाइल या डायरेक्ट्री हैंडल के खास remove() तरीके को कॉल करें. सभी सब-फ़ोल्डर वाले फ़ोल्डर को मिटाने के लिए, {recursive: true} विकल्प पास करें.
await fileHandle.remove();
await directoryHandle.remove({recursive: true});
विकल्प के तौर पर, अगर आपको डायरेक्ट्री में मिटाई जाने वाली फ़ाइल या फ़ोल्डर का नाम पता है, तो removeEntry() तरीके का इस्तेमाल करें.
directoryHandle.removeEntry('my first nested file');
फ़ाइलों और फ़ोल्डर को एक जगह से दूसरी जगह ले जाना और उनके नाम बदलना
फ़ाइलों और फ़ोल्डर का नाम बदलें और उन्हें दूसरी जगह ले जाने के लिए, move() तरीका इस्तेमाल करें. नाम बदलने और ले जाने, दोनों एक साथ या अलग-अलग हो सकते हैं.
// Rename a file.
await fileHandle.move('my first renamed file');
// Move a file to another directory.
await fileHandle.move(nestedDirectoryHandle);
// Move a file to another directory and rename it.
await fileHandle
.move(nestedDirectoryHandle, 'my first renamed and now nested file');
किसी फ़ाइल या फ़ोल्डर के पाथ को हल करना
यह जानने के लिए कि रेफ़रंस डायरेक्ट्री में, दी गई फ़ाइल या फ़ोल्डर कहां मौजूद है, resolve() तरीके का इस्तेमाल करें. साथ ही, FileSystemHandle को आर्ग्युमेंट के तौर पर पास करें. ऑरिजिन निजी फ़ाइल सिस्टम में किसी फ़ाइल या फ़ोल्डर का पूरा पाथ पाने के लिए, रूट डायरेक्ट्री का इस्तेमाल navigator.storage.getDirectory() से मिली रेफ़रंस डायरेक्ट्री के तौर पर करें.
const relativePath = await opfsRoot.resolve(nestedDirectoryHandle);
// `relativePath` is `['my first folder', 'my first nested folder']`.
यह देखना कि क्या दो फ़ाइल या फ़ोल्डर का हैंडल, एक ही फ़ाइल या फ़ोल्डर पर ले जा रहा है
कभी-कभी आपके पास दो हैंडल होते हैं और आपको पता नहीं होता कि वे एक ही फ़ाइल या फ़ोल्डर पर ले जा रहे हैं. यह देखने के लिए कि ऐसा है या नहीं, isSameEntry() तरीके का इस्तेमाल करें.
fileHandle.isSameEntry(nestedFileHandle);
// Returns `false`.
फ़ोल्डर के कॉन्टेंट की सूची बनाएं
FileSystemDirectoryHandle एक एसिंक्रोनस इटरेटर है, जिसे for await…of लूप के साथ दोहराया जाता है. एसिंक्रोनस इटरेटर के तौर पर, यह entries(), values(), और keys() तरीकों के साथ भी काम करता है. इनमें से अपनी ज़रूरत के मुताबिक जानकारी चुनी जा सकती है:
for await (let [name, handle] of directoryHandle) {}
for await (let [name, handle] of directoryHandle.entries()) {}
for await (let handle of directoryHandle.values()) {}
for await (let name of directoryHandle.keys()) {}
किसी फ़ोल्डर और सभी सबफ़ोल्डर के कॉन्टेंट को बार-बार सूची में डालें
एसिंक्रोनस लूप और रीकर्शन के साथ जोड़े गए फ़ंक्शन से निपटने में आसानी से गलती हो जाती है. नीचे दिया गया फ़ंक्शन, किसी फ़ोल्डर और उसके सभी सब-फ़ोल्डर के कॉन्टेंट की सूची बनाने के लिए शुरुआती पॉइंट हो सकता है. इसमें, सभी फ़ाइलें और उनके साइज़ शामिल हैं. अगर आपको फ़ाइल साइज़ की ज़रूरत नहीं है, तो फ़ंक्शन को आसान बनाया जा सकता है. इसमें directoryEntryPromises.push लिखा है. इसमें handle.getFile() प्रॉमिस को पुश करने के बजाय, handle को सीधे तौर पर लिखा जा सकता है.
const getDirectoryEntriesRecursive = async (
directoryHandle,
relativePath = '.',
) => {
const fileHandles = [];
const directoryHandles = [];
const entries = {};
// Get an iterator of the files and folders in the directory.
const directoryIterator = directoryHandle.values();
const directoryEntryPromises = [];
for await (const handle of directoryIterator) {
const nestedPath = `${relativePath}/${handle.name}`;
if (handle.kind === 'file') {
fileHandles.push({ handle, nestedPath });
directoryEntryPromises.push(
handle.getFile().then((file) => {
return {
name: handle.name,
kind: handle.kind,
size: file.size,
type: file.type,
lastModified: file.lastModified,
relativePath: nestedPath,
handle
};
}),
);
} else if (handle.kind === 'directory') {
directoryHandles.push({ handle, nestedPath });
directoryEntryPromises.push(
(async () => {
return {
name: handle.name,
kind: handle.kind,
relativePath: nestedPath,
entries:
await getDirectoryEntriesRecursive(handle, nestedPath),
handle,
};
})(),
);
}
}
const directoryEntries = await Promise.all(directoryEntryPromises);
directoryEntries.forEach((directoryEntry) => {
entries[directoryEntry.name] = directoryEntry;
});
return entries;
};
किसी वेब वर्कर में, ऑरिजिन निजी फ़ाइल सिस्टम का इस्तेमाल करना
जैसा कि पहले बताया गया है, वेब वर्कर मुख्य थ्रेड को ब्लॉक नहीं कर सकते. इसलिए, इस कॉन्टेक्स्ट में सिंक्रोनस तरीकों का इस्तेमाल किया जा सकता है.
सिंक्रोनस ऐक्सेस हैंडल फ़ेच किया जा रहा है
सबसे तेज़ फ़ाइल ऑपरेशन का एंट्री पॉइंट FileSystemSyncAccessHandle है, जो createSyncAccessHandle() को कॉल करके सामान्य FileSystemFileHandle से लिया जाता है.
const fileHandle = await opfsRoot
.getFileHandle('my highspeed file.txt', {create: true});
const syncAccessHandle = await fileHandle.createSyncAccessHandle();
सिंक्रोनस इन-प्लेस फ़ाइल विधियां
सिंक्रोनस ऐक्सेस हैंडल मिलने के बाद, आपको फ़ाइल को तुरंत वहीं से कनेक्ट करने का विकल्प मिलेगा जो सिंक्रोनस होती हैं.
getSize(): यह फ़ंक्शन, बाइट में फ़ाइल का साइज़ दिखाता है.write(): बफ़र के कॉन्टेंट को फ़ाइल में लिखा जाता है, वैकल्पिक रूप से दिए गए ऑफ़सेट पर, और लिखे गए बाइट की संख्या दिखाता है. लिखे गए बाइट की दिखाई गई संख्या की जांच करने से, कॉलर को गड़बड़ियों और कुछ हद तक लिखे गए कॉन्टेंट का पता लगाने और उन्हें मैनेज करने का विकल्प मिलता है.read(): यह फ़ंक्शन, किसी तय ऑफ़सेट के हिसाब से, फ़ाइल के कॉन्टेंट को बफ़र में पढ़ता है.truncate(): फ़ाइल को दिए गए साइज़ में बदलता है.flush(): इससे यह पक्का होता है कि फ़ाइल के कॉन्टेंट में,write()तक किए गए सभी बदलाव शामिल हैं.close(): इस बटन पर टैप करने से, ऐक्सेस हैंडल बंद हो जाता है.
यहां एक उदाहरण दिया गया है, जिसमें ऊपर बताए गए सभी तरीकों का इस्तेमाल किया गया है.
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle('fast', {create: true});
const accessHandle = await fileHandle.createSyncAccessHandle();
const textEncoder = new TextEncoder();
const textDecoder = new TextDecoder();
// Initialize this variable for the size of the file.
let size;
// The current size of the file, initially `0`.
size = accessHandle.getSize();
// Encode content to write to the file.
const content = textEncoder.encode('Some text');
// Write the content at the beginning of the file.
accessHandle.write(content, {at: size});
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `9` (the length of "Some text").
size = accessHandle.getSize();
// Encode more content to write to the file.
const moreContent = textEncoder.encode('More content');
// Write the content at the end of the file.
accessHandle.write(moreContent, {at: size});
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `21` (the length of
// "Some textMore content").
size = accessHandle.getSize();
// Prepare a data view of the length of the file.
const dataView = new DataView(new ArrayBuffer(size));
// Read the entire file into the data view.
accessHandle.read(dataView);
// Logs `"Some textMore content"`.
console.log(textDecoder.decode(dataView));
// Read starting at offset 9 into the data view.
accessHandle.read(dataView, {at: 9});
// Logs `"More content"`.
console.log(textDecoder.decode(dataView));
// Truncate the file after 4 bytes.
accessHandle.truncate(4);
किसी फ़ाइल को ऑरिजिन निजी फ़ाइल सिस्टम से, उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम में कॉपी करें
जैसा कि ऊपर बताया गया है, फ़ाइलों को ऑरिजिन निजी फ़ाइल सिस्टम से उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम में नहीं ले जाया जा सकता, लेकिन आपके पास फ़ाइलों को कॉपी करने का विकल्प होता है. showSaveFilePicker() सिर्फ़ मुख्य थ्रेड पर दिखता है, लेकिन वर्कर थ्रेड में नहीं, इसलिए कोड को वहीं पर चलाएं.
// On the main thread, not in the Worker. This assumes
// `fileHandle` is the `FileSystemFileHandle` you obtained
// the `FileSystemSyncAccessHandle` from in the Worker
// thread. Be sure to close the file in the Worker thread first.
const fileHandle = await opfsRoot.getFileHandle('fast');
try {
// Obtain a file handle to a new file in the user-visible file system
// with the same name as the file in the origin private file system.
const saveHandle = await showSaveFilePicker({
suggestedName: fileHandle.name || ''
});
const writable = await saveHandle.createWritable();
await writable.write(await fileHandle.getFile());
await writable.close();
} catch (err) {
console.error(err.name, err.message);
}
ऑरिजिन के निजी फ़ाइल सिस्टम को डीबग करें
पहले से मौजूद DevTools सुविधा जोड़े जाने तक (crbug/1284595 देखें), ऑरिजिन निजी फ़ाइल सिस्टम को डीबग करने के लिए OPFS Explorer Chrome एक्सटेंशन का इस्तेमाल करें. ऊपर नई फ़ाइलें और फ़ोल्डर बनाना सेक्शन से स्क्रीनशॉट सीधे एक्सटेंशन से लिया गया है.
एक्सटेंशन इंस्टॉल करने के बाद, Chrome DevTools खोलें और OPFS एक्सप्लोरर टैब चुनें. इसके बाद, आप फ़ाइल के क्रम की जांच करने के लिए तैयार हैं. फ़ाइल के नाम पर क्लिक करके, ऑरिजिन के प्राइवेट फ़ाइल सिस्टम से फ़ाइलों को उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम में सेव करें. साथ ही, ट्रैश कैन के आइकॉन पर क्लिक करके फ़ाइलें और फ़ोल्डर मिटाएं.
डेमो
डेमो में ऑरिजिन निजी फ़ाइल सिस्टम को इस्तेमाल करते हुए देखें (अगर आपने OPFS एक्सप्लोरर एक्सटेंशन इंस्टॉल किया है), जो WebAssembly में इकट्ठा किए गए SQLite डेटाबेस के बैकएंड के तौर पर इसका इस्तेमाल करता है. Glitch पर सोर्स कोड देखना न भूलें. ध्यान दें कि नीचे दिया गया एम्बेड किया गया वर्शन कैसे ऑरिजिन निजी फ़ाइल सिस्टम बैकएंड का इस्तेमाल करता है (क्योंकि iframe क्रॉस-ऑरिजिन है), लेकिन जब डेमो को किसी अलग टैब में खोला जाता है, तो ऐसा होता है.
मीटिंग में सामने आए नतीजे
whatWG के बताए गए ऑरिजिन निजी फ़ाइल सिस्टम ने वेब पर फ़ाइलों को इस्तेमाल करने और उनके साथ इंटरैक्ट करने के तरीके को आकार दिया है. इसने इस्तेमाल के ऐसे नए मामले चालू किए हैं जिन्हें उपयोगकर्ता को दिखने वाले फ़ाइल सिस्टम से हासिल नहीं किया जा सकता था. सभी प्रमुख ब्राउज़र वेंडर—Apple, Mozilla, और Google—में शामिल हैं और एक संयुक्त विज़न है. ऑरिजिन निजी फ़ाइल सिस्टम का डेवलपमेंट बहुत ही मिलकर किया जाने वाला काम है. इसकी प्रोग्रेस के लिए डेवलपर और उपयोगकर्ताओं का सुझाव ज़रूरी है. हम स्टैंडर्ड को बेहतर बनाने और उसमें सुधार करने की लगातार कोशिश कर रहे हैं. इसलिए, 'समस्याएं' या 'पुल के अनुरोध' के तौर पर, whatwg/fs का डेटा स्टोर करने की जगह पर सुझाव या राय दी जा सकती है.
इसी विषय से जुड़े कुछ लिंक
- फ़ाइल सिस्टम स्टैंडर्ड की खास जानकारी
- फ़ाइल सिस्टम स्टैंडर्ड रेपो
- Origin Private File System WebKit पोस्ट के साथ File System API का
- OPFS एक्सप्लोरर एक्सटेंशन
स्वीकार हैं
इस लेख की समीक्षा ऑस्टिन सली, एटीएन नोएल, और रेचल एंड्रू ने की है. Unsplash पर क्रिस्टीना रंप की हीरो इमेज.