使用IndexedDB存儲(chǔ)圖像和文件

有一天，我們寫(xiě)了關(guān)于如何在localStorage中保存圖像和文件的文章，它是關(guān)于我們今天可用的實(shí)用主義。 然而，localStorage有一些性能影響 - 我們將在稍后的博客中討論這個(gè)問(wèn)題 - 并且未來(lái)期望的方法是使用IndexedDB。 在這里，我將向您介紹如何在IndexedDB中存儲(chǔ)圖像和文件，然后通過(guò)ObjectURL呈現(xiàn)它們。

本文是翻譯過(guò)來(lái)的，原文在這里Storing images and files in IndexedDB

關(guān)于作者： Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at robertnyman.com and loves to travel and meet people.

使用IndexedDB存儲(chǔ)圖像和文件的常規(guī)步驟

首先，我們來(lái)談?wù)勎覀儗?chuàng)建一個(gè)IndexedDB數(shù)據(jù)庫(kù)，將文件保存到其中然后將其讀出并顯示在頁(yè)面中的步驟：

1、創(chuàng)建或打開(kāi)數(shù)據(jù)庫(kù)

2、創(chuàng)建一個(gè)objectStore

3、將圖像文件檢索為blob

4、初始化一個(gè)數(shù)據(jù)庫(kù)事物

5、保存圖像blob到數(shù)據(jù)庫(kù)中去

6、讀出保存的文件并從中創(chuàng)建ObjectURL并將其設(shè)置為頁(yè)面中圖像元素的src

1、創(chuàng)建或打開(kāi)數(shù)據(jù)庫(kù)。

// IndexedDB
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1;


/* 
    Note: The recommended way to do this is assigning it to window.indexedDB,
    to avoid potential issues in the global scope when web browsers start 
    removing prefixes in their implementations.
    You can assign it to a varible, like var indexedDB… but then you have 
    to make sure that the code is contained within a function.
*/


// Create/open database
var request = indexedDB.open("elephantFiles", dbVersion);


request.onsuccess = function (event) {
    console.log("Success creating/accessing IndexedDB database");
    db = request.result;


    db.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };
    
    // Interim solution for Google Chrome to create an objectStore. Will be deprecated
    if (db.setVersion) {
        if (db.version != dbVersion) {
            var setVersion = db.setVersion(dbVersion);
            setVersion.onsuccess = function () {
                createObjectStore(db);
                getImageFile();
            };
        }
        else {
            getImageFile();
        }
    }
    else {
        getImageFile();
    }
}


// For future use. Currently only in latest Firefox versions
request.onupgradeneeded = function (event) {
    createObjectStore(event.target.result);
};

使用它的預(yù)期方法是在創(chuàng)建數(shù)據(jù)庫(kù)時(shí)觸發(fā)onupgradeneeded事件或獲取更高版本號(hào)。 目前僅在Firefox中支持此功能，但很快將在其他Web瀏覽器中支持。 如果Web瀏覽器不支持此事件，則可以使用已棄用的setVersion方法并連接到其onsuccess事件。

2、創(chuàng)建一個(gè)objectStore（如果它尚不存在）

// Create an objectStore
console.log("Creating objectStore")
dataBase.createObjectStore("elephants");

在這里，您創(chuàng)建一個(gè)ObjectStore，您將存儲(chǔ)數(shù)據(jù) - 或者在我們的例子中，文件 - 并且一旦創(chuàng)建，您不需要重新創(chuàng)建它，只需更新其內(nèi)容即可。

3、將圖像文件檢索為blob

// Create XHR
var xhr = new XMLHttpRequest(),
    blob;


xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";


xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        console.log("Image retrieved");
        
        // File as response
        blob = xhr.response;


        // Put the received blob into IndexedDB
        putElephantInDb(blob);
    }
}, false);
// Send XHR
xhr.send();

此代碼直接將文件的內(nèi)容作為blob獲取。目前只支持Firefox。 收到整個(gè)文件后，將blob發(fā)送到函數(shù)以將其存儲(chǔ)在數(shù)據(jù)庫(kù)中。

4、初始化一個(gè)數(shù)據(jù)庫(kù)事物

// Open a transaction to the database
var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);

要開(kāi)始向數(shù)據(jù)庫(kù)寫(xiě)入內(nèi)容，您需要使用objectStore名稱和要執(zhí)行的操作類型（在本例中為read和write）啟動(dòng)事務(wù)。

5、保存圖像blob到數(shù)據(jù)庫(kù)中去

// Put the blob into the dabase
transaction.objectStore("elephants").put(blob, "image");

一旦事務(wù)到位，您將獲得對(duì)所需objectStore的引用，然后將您的blob放入其中并為其提供密鑰。

6、讀出保存的文件并從中創(chuàng)建ObjectURL并將其設(shè)置為頁(yè)面中圖像元素的src

// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
    var imgFile = event.target.result;
    console.log("Got elephant!" + imgFile);


    // Get window.URL object
    var URL = window.URL || window.webkitURL;


    // Create and revoke ObjectURL
    var imgURL = URL.createObjectURL(imgFile);


    // Set img src to ObjectURL
    var imgElephant = document.getElementById("elephant");
    imgElephant.setAttribute("src", imgURL);


    // Revoking ObjectURL
    URL.revokeObjectURL(imgURL);
};

使用相同的事務(wù)來(lái)獲取剛剛存儲(chǔ)的圖像文件，然后創(chuàng)建一個(gè)objectURL并將其設(shè)置為頁(yè)面中圖像的src。 例如，這也可以是一個(gè)附加到腳本元素的JavaScript文件，然后它將解析JavaScript。

最后完整代碼

(function () {
    // IndexedDB
    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
        IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
        dbVersion = 1.0;


    // Create/open database
    var request = indexedDB.open("elephantFiles", dbVersion),
        db,
        createObjectStore = function (dataBase) {
            // Create an objectStore
            console.log("Creating objectStore")
            dataBase.createObjectStore("elephants");
        },


        getImageFile = function () {
            // Create XHR
            var xhr = new XMLHttpRequest(),
                blob;


            xhr.open("GET", "elephant.png", true);
            // Set the responseType to blob
            xhr.responseType = "blob";


            xhr.addEventListener("load", function () {
                if (xhr.status === 200) {
                    console.log("Image retrieved");
                    
                    // Blob as response
                    blob = xhr.response;
                    console.log("Blob:" + blob);


                    // Put the received blob into IndexedDB
                    putElephantInDb(blob);
                }
            }, false);
            // Send XHR
            xhr.send();
        },


        putElephantInDb = function (blob) {
            console.log("Putting elephants in IndexedDB");


            // Open a transaction to the database
            var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE);


            // Put the blob into the dabase
            var put = transaction.objectStore("elephants").put(blob, "image");


            // Retrieve the file that was just stored
            transaction.objectStore("elephants").get("image").onsuccess = function (event) {
                var imgFile = event.target.result;
                console.log("Got elephant!" + imgFile);


                // Get window.URL object
                var URL = window.URL || window.webkitURL;


                // Create and revoke ObjectURL
                var imgURL = URL.createObjectURL(imgFile);


                // Set img src to ObjectURL
                var imgElephant = document.getElementById("elephant");
                imgElephant.setAttribute("src", imgURL);


                // Revoking ObjectURL
                URL.revokeObjectURL(imgURL);
            };
        };


    request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };


    request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;


        db.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };
        
        // Interim solution for Google Chrome to create an objectStore. Will be deprecated
        if (db.setVersion) {
            if (db.version != dbVersion) {
                var setVersion = db.setVersion(dbVersion);
                setVersion.onsuccess = function () {
                    createObjectStore(db);
                    getImageFile();
                };
            }
            else {
                getImageFile();
            }
        }
        else {
            getImageFile();
        }
    }
    
    // For future use. Currently only in latest Firefox versions
    request.onupgradeneeded = function (event) {
        createObjectStore(event.target.result);
    };
})();

瀏覽器支持

• URL API支持性

• indexDb

Github源碼

作者：一兵
鏈接：https://juejin.cn/post/6844903703921557518
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。