解决JS中LocalStorage存储大Base64图片的配额超限错误

LocalStorage单域名配额通常在5MB左右，大体积Base64图片很容易触发超限错误，以下是几种可行的替代方案：

1. 用IndexedDB存储 #

IndexedDB是浏览器提供的异步数据库，没有严格的存储上限（仅受用户磁盘空间限制），非常适合存储大文件类数据。

存入Base64示例： #

// 打开或创建数据库
const openDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('ImageStorageDB', 1);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      // 创建存储对象
      db.createObjectStore('images', { keyPath: 'id' });
    };
    request.onsuccess = (e) => resolve(e.target.result);
    request.onerror = (e) => reject(e.target.error);
  });
};

// 保存Base64图片到IndexedDB
const saveImageToDB = async (id, base64Data) => {
  const db = await openDB();
  const transaction = db.transaction('images', 'readwrite');
  const store = transaction.objectStore('images');
  await store.add({ id, data: base64Data });
  await transaction.complete;
  db.close();
};

// 调用示例
saveImageToDB('my-image', 'data:image/png;base64,...');

读取示例： #

const getImageFromDB = async (id) => {
  const db = await openDB();
  const transaction = db.transaction('images', 'readonly');
  const store = transaction.objectStore('images');
  const request = store.get(id);
  return new Promise((resolve, reject) => {
    request.onsuccess = () => resolve(request.result?.data);
    request.onerror = () => reject(request.error);
    db.close();
  });
};

2. 先转Blob再存储（减少体积） #

Base64编码会让文件体积增加约30%，先把Base64转换成Blob再存储，既能节省空间，也更适合浏览器处理。

Base64转Blob函数： #

const base64ToBlob = (base64) => {
  const parts = base64.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  return new Blob([uInt8Array], { type: contentType });
};

将Blob存入IndexedDB后，读取时可转成可访问的URL：

// 读取Blob并转成展示用URL
const getImageUrlFromDB = async (id) => {
  const db = await openDB();
  const transaction = db.transaction('images', 'readonly');
  const store = transaction.objectStore('images');
  const request = store.get(id);
  return new Promise((resolve, reject) => {
    request.onsuccess = () => {
      if (request.result?.data) {
        const url = URL.createObjectURL(request.result.data);
        resolve(url);
      } else {
        resolve(null);
      }
    };
    request.onerror = () => reject(request.error);
    db.close();
  });
};

3. 使用File System Access API（现代浏览器） #

如果目标浏览器支持（Chrome 86+、Edge 86+等），可以用这个API直接将Blob写入本地临时文件，完全不受浏览器存储配额限制。

保存示例： #

const saveImageToLocalFile = async (blob, fileName = 'temp-image.png') => {
  const handle = await window.showSaveFilePicker({
    suggestedName: fileName,
    types: [{
      description: 'Images',
      accept: { 'image/*': ['.png', '.jpg', '.jpeg'] }
    }]
  });
  const writable = await handle.createWritable();
  await writable.write(blob);
  await writable.close();
  return handle;
};

// 调用：先转Blob再保存
const blob = base64ToBlob('data:image/png;base64,...');
const fileHandle = await saveImageToLocalFile(blob);

读取示例： #

const readImageFromLocalFile = async (fileHandle) => {
  const file = await fileHandle.getFile();
  const url = URL.createObjectURL(file);
  return url;
};

4. 内存临时存储（仅页面存活时有效） #

如果只是临时在当前页面使用，不需要持久化，可以直接把Base64或Blob存在内存变量里：

// 全局变量存储
let tempImageData = null;

// 设置
tempImageData = 'data:image/png;base64,...'; // 或Blob对象

// 使用
document.querySelector('#img').src = tempImageData;

这种方式完全没有存储限制，但页面刷新或关闭后数据会丢失，适合临时预览场景。

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