תמיכה ב-Blob ב-IndexedDB נחתה ב-Chrome Dev

Eiji Kitamura

ב-Chrome Dev נוספה תמיכה ב-Blob ב-IndexedDB.

זוהי תכונה שרבים חיכו לה ב-Chrome, שמאפשרת ל-IndexedDB API לאחסן ולשלוף Blob בלי להמיר אותו למחרוזת Base64.

IndexedDB מספק אחסון מתמיד מסוג מפתח/ערך בקנה מידה גדול, שזמין ברוב הדפדפנים המודרניים (נראה ש-Safari יתמוך ב-iOS8 וב-Mac OS X 10.10). בודקים את סטטוס ההטמעה.

Blob הוא אובייקט בינארי שדומה לקובץ, ומנועי JavaScript מודרניים יכולים לטפל בו. אובייקטים מסוג File יורשים מ-Blob. אפשר גם לאחזר תמונות וקבצים כ-Blob באמצעות XMLHttpRequest. בודקים את סטטוס ההטמעה.

אחסון Blob ב-IndexedDB

אין דרך לזהות את הזמינות של Blob ב-IndexedDB. בעיקרון, צריך להשתמש ב-try-catch ואז להשתמש במחרוזת במקום ב-Blob אם הוא לא זמין. הנה קוד לדוגמה:

// Create an example Blob object
var blob = new Blob(['blob object'], {type: 'text/plain'});

try {
    var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

    // Store the object  
    var req = store.put(blob, 'blob');
    req.onerror = function(e) {
        console.log(e);
    };
    req.onsuccess = function(event) {
        console.log('Successfully stored a blob as Blob.');
    };
} catch (e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // After exception, you have to start over from getting transaction.
        var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

        // Obtain DataURL string
        var data = event.target.result;
        var req = store.put(data, 'blob');
        req.onerror = function(e) {
            console.log(e);
        };
        req.onsuccess = function(event) {
            console.log('Successfully stored a blob as String.');
        };
    };
    // Convert Blob into DataURL string
    reader.readAsDataURL(blob);
}

תמיכה ב-Blob ב-IndexedDB כבר זמינה גם ב-Firefox וב-Internet Explorer. צריך לבדוק את התמיכה ב-Safari.

שיהיה לך כיף!