无需后端服务时如何在浏览器端持久化存储用户上传的图片

首先直接给你最关心的问题答案：IndexedDB就是你这个场景下的业界标准最佳实践，完全可以放心用。
主流现代浏览器给单个站点的IndexedDB存储配额通常是可用磁盘空间的50%，单站点少说都有GB级的可用空间，你要的250MB容量完全没有压力。它支持直接存储二进制Blob/File对象，不需要转base64浪费额外空间，数据持久化存储在站点本地存储区，除非用户手动清理浏览器站点数据，否则下次打开页面可以直接读取，不需要重复弹授权，也完全不需要后端服务支持。

全可选无后端方案对比 #

所有方案都不需要上传文件到服务端，按推荐优先级排序：

• IndexedDB（优先选）
  • 适配所有主流现代浏览器（Chrome/Edge/Firefox/Safari 10+全支持），兼容性拉满
  • 支持事务、自定义索引，做多图的增删改查、列表筛选逻辑非常方便
  • 直接存原始File/Blob对象即可，不需要转码，读写性能足够
  • 原生API虽然偏底层，但逻辑不复杂，核心存储逻辑参考：

  // 初始化数据库
  const dbRequest = indexedDB.open('UserImageStore', 1);
  dbRequest.onupgradeneeded = (e) => {
    const db = e.target.result;
    // 建图片存储表，自增ID做主键，可加文件名、上传时间做索引
    if (!db.objectStoreNames.contains('images')) {
      const store = db.createObjectStore('images', { keyPath: 'id', autoIncrement: true });
      store.createIndex('createTime', 'createTime', { unique: false });
    }
  };
  
  // 存用户选中的图片
  const saveSelectedImage = (file) => {
    return new Promise((resolve) => {
      const db = dbRequest.result;
      const tx = db.transaction('images', 'readwrite');
      tx.objectStore('images').add({
        file,
        name: file.name,
        createTime: Date.now()
      });
      tx.oncomplete = resolve;
    });
  };
  
  // 读取图片时直接用URL.createObjectURL(file)生成临时地址赋值给img.src即可，不需要转base64
  

• OPFS（源私有文件系统）
  • 浏览器专门提供的源端私有文件存储能力，大文件读写性能比IndexedDB更好，容量配额和IndexedDB一致
  • 缺点是API相对较新，对2021年之前发布的浏览器版本兼容性差一些，做多文件管理的逻辑比IndexedDB稍复杂
• File System Access API
  • 可以申请用户授予指定本地目录的永久读写权限，只需要用户第一次授权选一次目录，后续打开页面可以直接读取目录内的图片，不需要把文件拷贝到浏览器存储区，理论上没有容量上限
  • 缺点是兼容性一般，Safari的支持还存在不少问题，需要用户额外做一次目录选择的授权操作
• Cache API
  • 原本是为Service Worker缓存网络资源设计的API，同样支持存储二进制响应，容量足够
  • 缺点是设计场景不是用户自定义文件存储，没有事务、索引能力，做多图管理的逻辑会非常别扭，只适合固定静态资源缓存，不适合你的场景

明确不推荐的方案 #

• localStorage：容量上限仅5MB左右，只能存字符串，转base64存还会额外增加1/3的体积，完全满足不了需求
• 每次触发文件选择授权弹窗：用户每次打开页面都要重新选文件，体验极差
• 后端存储：额外带来服务器成本、带宽成本、用户隐私合规问题，属于过度设计，完全没必要

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