是否可以在浏览器中缓存上传的图片？

Question

我有一个图像编辑器应用程序，我在其中上传图像并被重定向到另一个 URL 并从服务器下载相同的图像。我可以在某处缓存图像以跳过我正在下载刚刚上传的图像的部分吗？将

blob

保存到

localStorage

太棘手了，因为存在一些问题（大小限制，仅限字符串值）。

Answer 1

您可以使用 IndexedDB API

IndexedDB 是一个低级 API，用于客户端存储大量结构化数据（包括文件/blob）。此 API 使用索引来实现对此数据的高性能搜索。虽然 Web 存储对于存储少量数据很有用，但对于存储大量结构化数据则不太有用。 IndexedDB提供了一个解决方案。这是 MDN IndexedDB 覆盖范围的主要登陆页面 - 在这里我们提供完整 API 参考和使用指南、浏览器支持详细信息以及关键概念的一些解释的链接。

示例

我的示例使用Blob（代码为

imageBlob

）来保存图像。

// create database
var openRequest = indexedDB.open('imageStorage', 1);

// create object entry
var openRequest.onupgradeneeded = function() {
    var db = openRequest.result;
    db.createObjectStore('images', { keyPath: 'id' }
}

// store an image
const transaction = db.transaction(['images'], 'readwrite');
const store = transaction.objectStore('images');
store.add({ id: 'foo', image: imageBlob});

// read the image
const transaction = db.transaction(["images"], "readonly");
const store = transaction.objectStore('images');
const request = store.get('foo');
request.onsuccess = function() {
    const imageBlob = request.result.image;
};