IndexedDB Blob 存储与文件引用模式实践

概述IndexedDB 支持存储二进制 Blob。本文提供存储与读取封装，并演示通过 ObjectURL 进行显示与下载。建表与写入function openDB(name) {

return new Promise((resolve, reject) => {

const r = indexedDB.open(name, 1);

r.onupgradeneeded = () => {

const db = r.result;

if (!db.objectStoreNames.contains('blobs')) {

db.createObjectStore('blobs', { keyPath: 'id' });

}

};

r.onsuccess = () => resolve(r.result);

r.onerror = () => reject(r.error);

});

}

async function saveBlob(id, blob) {

const db = await openDB('blobdb');

const tx = db.transaction('blobs', 'readwrite');

tx.objectStore('blobs').put({ id, type: blob.type, size: blob.size, createdAt: Date.now(), blob });

await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); });

db.close();

}

读取与显示async function loadBlob(id) {

const db = await openDB('blobdb');

const tx = db.transaction('blobs', 'readonly');

const req = tx.objectStore('blobs').get(id);

const rec = await new Promise((resolve, reject) => { req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); });

db.close();

return rec ? rec.blob : null;

}

async function showImage(id, imgEl) {

const blob = await loadBlob(id);

if (!blob) return;

const url = URL.createObjectURL(blob);

imgEl.src = url;

imgEl.onload = () => URL.revokeObjectURL(url);

}