使用localStorage存储图片Base64时触发QuotaExceededError的解决方法咨询

你遇到的问题很典型——localStorage的存储配额通常只有5MB左右，而且Base64编码会让图片体积额外增加30%左右，所以存稍大一点的图片就容易触发配额超限错误。下面给你几个更适合图片缓存的方案，按需选择：

1. 使用IndexedDB存储Blob（推荐持久化大文件） #

IndexedDB支持存储二进制数据（比如Blob），配额比localStorage大得多（通常是浏览器磁盘空间的一部分，比如几十GB），而且不用转Base64，能节省空间。

示例代码：

// 打开或创建IndexedDB数据库
function openImageDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('ImageCacheDB', 1);
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // 创建存储对象，用日期作为键
      db.createObjectStore('images', { keyPath: 'date' });
    };
    
    request.onsuccess = (event) => resolve(event.target.result);
    request.onerror = (event) => reject(event.target.error);
  });
}

// 存储图片Blob到IndexedDB
async function saveImageToDB(dateKey, blob) {
  const db = await openImageDB();
  const transaction = db.transaction('images', 'readwrite');
  const store = transaction.objectStore('images');
  
  store.put({ date: dateKey, blob });
  
  await new Promise((resolve, reject) => {
    transaction.oncomplete = resolve;
    transaction.onerror = reject;
  });
  db.close();
}

// 从IndexedDB读取图片
async function getImageFromDB(dateKey) {
  const db = await openImageDB();
  const transaction = db.transaction('images', 'readonly');
  const store = transaction.objectStore('images');
  
  const request = store.get(dateKey);
  return new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result?.blob);
    request.onerror = () => reject(request.error);
    db.close();
  });
}

// 调用示例：替换你原来的localStorage代码
// 这里不用转Base64，直接存原始Blob即可
fr.onloadend = async () => {
  const dateKey = today.toDateString();
  await saveImageToDB(dateKey, blob);
};

2. 使用Cache API（适合PWA离线缓存） #

如果你的项目是PWA（渐进式Web应用），Cache API是专门为资源缓存设计的，支持HTTP请求和响应的缓存，也能直接存Blob，配额同样很大。

示例代码：

// 打开缓存空间
async function openImageCache() {
  return await caches.open('image-cache-v1');
}

// 存储图片Blob到Cache
async function cacheImage(dateKey, blob) {
  const cache = await openImageCache();
  // 创建一个响应对象，把Blob作为主体
  const response = new Response(blob, {
    headers: { 'Content-Type': 'image/jpeg' } // 根据图片实际类型调整
  });
  await cache.put(`image-${dateKey}`, response);
}

// 从Cache读取图片
async function getCachedImage(dateKey) {
  const cache = await openImageCache();
  const response = await cache.match(`image-${dateKey}`);
  if (response) {
    return await response.blob();
  }
  return null;
}

// 调用示例
fr.onloadend = async () => {
  const dateKey = today.toDateString();
  await cacheImage(dateKey, blob);
};

3. 内存临时缓存（适合会话内临时存储） #

如果不需要持久化缓存（页面刷新后可以丢失），直接用内存中的变量存储会更高效，完全不会有配额问题。

示例代码：

// 用Map存图片缓存，键是日期，值是Blob或Image对象
const imageMemoryCache = new Map();

// 存储图片
fr.onloadend = () => {
  const dateKey = today.toDateString();
  imageMemoryCache.set(dateKey, blob);
};

// 读取图片
function getCachedImage(dateKey) {
  return imageMemoryCache.get(dateKey);
}

总结 #

• 要持久化存储大图片：选IndexedDB
• 做PWA离线缓存：选Cache API
• 仅会话内临时缓存：选内存变量

内容的提问来源于stack exchange，提问作者user1050172