Vanilla JavaScript中localStorage存储图片数据触发配额超限问题求助

Hey Sergio, 这个问题我太熟悉了——localStorage的默认配额大多在5MB左右，而图片转成JSON字符串（尤其是base64格式）体积会比原文件大30%，多次更新叠加下来很容易触发「值超出配额」的报错。给你几个靠谱的解决方案，按优先级排序：

1. 改用IndexedDB存储图片数据 #

IndexedDB是浏览器提供的专门用于存储大量结构化数据的API，它的配额远高于localStorage（通常是浏览器可用存储空间的一部分，比如几十GB级别的上限），非常适合存图片这类二进制数据。这里给你一个简单的封装示例：

// 初始化IndexedDB存储图片的工具函数
function initImageDB() {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('ArticleImageStore', 1);
    
    // 首次打开或版本升级时创建对象仓库
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      // 创建存储图片的对象仓库，用文章ID作为键
      db.createObjectStore('images', { keyPath: 'articleId' });
    };
    
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    
    request.onerror = (event) => {
      reject(`IndexedDB初始化失败: ${event.target.error}`);
    };
  });
}

// 保存图片到IndexedDB
async function saveArticleImage(articleId, imageBlob) {
  const db = await initImageDB();
  const transaction = db.transaction('images', 'readwrite');
  const store = transaction.objectStore('images');
  
  // 先删除旧的图片（避免重复存储占用空间）
  await store.delete(articleId);
  // 存入新图片
  await store.add({ articleId, imageBlob });
  
  transaction.oncomplete = () => db.close();
}

// 读取图片
async function getArticleImage(articleId) {
  const db = await initImageDB();
  const transaction = db.transaction('images', 'readonly');
  const store = transaction.objectStore('images');
  const result = await store.get(articleId);
  
  db.close();
  return result?.imageBlob;
}

// 使用示例：假设你的payload里有articleId和imageBlob
saveArticleImage(payload.articleId, payload.imageBlob)
  .then(() => {
    // 把非图片的文本数据存在localStorage即可
    const textOnlyPayload = {...payload, imageBlob: undefined};
    localStorage.setItem('article', JSON.stringify(textOnlyPayload));
  })
  .catch(err => console.error('存储失败:', err));

2. 压缩图片后再存入localStorage（迫不得已时用） #

如果因为某些原因必须用localStorage，一定要先压缩图片的尺寸和质量，大幅减少体积。用Canvas就能轻松实现：

// 压缩图片的工具函数，返回压缩后的Blob
function compressImage(file, maxWidth = 800, quality = 0.7) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    
    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;
      
      // 按比例缩小图片到指定宽度
      if (width > maxWidth) {
        height = (height * maxWidth) / width;
        width = maxWidth;
      }
      
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, width, height);
      
      // 转成JPEG格式，控制质量
      canvas.toBlob(
        (blob) => {
          resolve(blob);
          URL.revokeObjectURL(img.src); // 释放内存
        },
        'image/jpeg',
        quality
      );
    };
    
    img.onerror = () => reject('图片加载失败');
  });
}

// 使用示例
compressImage(payload.imageFile, 600, 0.6)
  .then(compressedBlob => {
    // 转成base64字符串存入localStorage
    const reader = new FileReader();
    reader.onload = () => {
      payload.imageBase64 = reader.result;
      // 先删除旧数据再存新的，避免残留
      localStorage.removeItem('article');
      localStorage.setItem('article', JSON.stringify(payload));
    };
    reader.readAsDataURL(compressedBlob);
  })
  .catch(err => console.error('压缩失败:', err));

3. 定期清理旧数据 #

每次更新存储前，一定要先删除旧的article条目，避免新旧数据叠加占用额外空间。另外可以给存储的数据加上过期时间，定期清理不再需要的内容：

// 带过期时间的存储函数
function setWithExpiry(key, value, ttl) {
  const now = new Date();
  const item = {
    value: value,
    expiry: now.getTime() + ttl,
  };
  localStorage.setItem(key, JSON.stringify(item));
}

// 读取时检查是否过期
function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;
  
  const item = JSON.parse(itemStr);
  const now = new Date();
  
  // 如果过期就删除并返回null
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

// 使用示例：设置7天过期
setWithExpiry('article', payload, 7 * 24 * 60 * 60 * 1000);

总结一下，优先用IndexedDB存图片，把文本数据和图片拆分存储；如果必须用localStorage，一定要压缩图片+清理旧数据，这样就能避开配额限制了。

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