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); }