נמאס לכם מהמגבלה של 5 מגה של local storage? רוצים לכתוב ולקרוא מהר לקבצים שיישמרו אבל אתם תקועים בתוך דפדפן? מסתבר שיש פיתרון יחסית חדש ולא מסובך שנקרא Origin private file system או בקיצור OPFS. מנגנון זה מספק לנו משהו שעובד בדיוק כמו מערכת קבצים אבל סגור בתוך הדפדפן. כרום אצלי על המחשב נתן לי Quota של 500 ג'יגה אפילו בלי לבקש רשות.

1. דוגמה 1 - כתיבת קובץ

הממשק זמין דרך האוביקט navigator.storage, ובשביל לראות איך זה עובד הלכתי ל ChatGPT וביקשתי שתי דוגמאות. דוגמה ראשונה כותבת קובץ לדיסק:

async function create1MBFileInOPFS() {
    // Request a handle to the OPFS root directory
    const rootDir = await navigator.storage.getDirectory();

    // Create a new file in OPFS
    const fileHandle = await rootDir.getFileHandle('1MB_text_file.txt', { create: true });

    // Create a writable stream
    const writableStream = await fileHandle.createWritable();

    // Generate 1MB of text data (1 character = 1 byte for plain text)
    const sizeInBytes = 1024 * 1024; // 1MB
    const largeText = 'A'.repeat(sizeInBytes); // A string with 1MB of 'A' characters

    // Write the text data to the file
    await writableStream.write(largeText);

    // Close the writable stream to save the file
    await writableStream.close();

    console.log('1 MB text file created in OPFS');
}

נקרא את זה יחד -

1. הפקודה getDirectory נותנת לי נקודת כניסה ל storage.

2. הפקודה getFileHandle מחברת אותי לקובץ, והאופציה create אומרת אם ליצור את הקובץ במידה ולא קיים.

3. הפקודה createWritable מחזירה זרם לכתיבה לקובץ.

4. הפקודה write של זרם הכתיבה מקבלת מחרוזת וכותבת אותה לקובץ.

5. בסוף מפעילים close כדי לסיים את העבודה עם הקובץ.

כל הפונקציות הן אסינכרוניות ועובדות גם מ Web Worker.

2. דוגמה 2 - הצגת רשימת קבצים

הדוגמה השניה מציגה את רשימת הקבצים:

async function listFilesInOPFS() {
    // Request a handle to the OPFS root directory
    const rootDir = await navigator.storage.getDirectory();

    // Iterate over the entries in the root directory
    for await (const [name, handle] of rootDir) {
        if (handle.kind === 'file') {
            console.log(`File: ${name}`);
        } else if (handle.kind === 'directory') {
            console.log(`Directory: ${name}`);
        }
    }
}

// Call the function to list files in the root directory
listFilesInOPFS();

שוב משתמשים ב getDirectory כדי להיכנס לתיקייה ואז אפשר לרוץ בלולאה על אותה התיקיה כדי לקבל את הקבצים והתיקיות שבתוכה. כל דבר שהוא מסוג directory מאפשר איטרציה עם for כך שאפשר היה להמשיך רקורסיבית ולהדפיס את כל הקבצים והתיקיות על הדיסק הוירטואלי.

נשים לב-

1. הדיסק הוירטואלי מהיר ומספר המון מקום עבודה. זה טוב אם אתם בונים מערכת ווב וצריכים לשמור הרבה מידע שיהיה זמין אופליין.

2. הדיסק הוירטואלי ספציפי לדומיין, בדיוק כמו עוגיות ו local storage.

3. אחריות שלכם לנקות את הקבצים עם פקודת removeEntry כשאתם כבר לא צריכים אותם.

4. אפשר לראות את הגודל שתופסים כל הקבצים במסך כלי הפיתוח בטאב application. לא מצאתי במסך כלי הפיתוח דרך לשוטט בתיקיות הוירטואליות או בתוכן הקבצים עצמם. כן אפשר לעשות את זה מתוך קוד JavaScript כל עוד אתם בדומיין שיצר את הקבצים.