Chrome 개발자부터 IndexedDB에 대한 Blob 지원

키타무라 에이지

Twitter GitHub Glitch 마스토돈

Chrome 개발자부터 IndexedDB에서 Blob을 지원합니다.

이는 Chrome에서 오랫동안 기다려온 기능으로, IndexedDB API에서 Blob을 Base64 문자열로 변환하지 않고도 저장하고 검색할 수 있도록 합니다.

IndexedDB는 대부분의 최신 브라우저에서 사용할 수 있는 대규모 키-값 유형의 영구 저장소를 제공합니다 (Safari는 iOS8 및 Mac OS X 10.10에서 지원될 예정). 구현 상태를 확인하세요.

Blob은 최신 JavaScript 엔진에서 처리할 수 있는 파일과 유사한 바이너리 객체입니다. 파일 객체는 Blob에서 상속됩니다. XMLHttpRequest를 통해 이미지와 파일을 Blob으로 가져올 수도 있습니다. 구현 상태를 확인하세요.

IndexedDB에 Blob 저장

IndexedDB에서 Blob 가용성을 기능을 감지할 수 있는 방법은 없습니다. 기본적으로 Blob을 사용할 수 없는 경우 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);
}

IndexedDB에 대한 Blob 지원은 이미 Firefox와 Internet Explorer에서 지원됩니다. Safari 지원 여부를 조사해야 합니다.

즐거운 시간 되세요.