读取本地数据库图片，轻松实现刷关页面不丢失，看这里！

前端

2022-12-13 15:48:13

利用 IndexedDB 本地存储数据库存储文件

永远告别图片丢失之痛

想象一下这种情况：你花了很多时间将图片上传到网站上，但页面一刷新，图片就消失了，你不得不重新上传。多么令人沮丧！

不用再烦恼了！IndexedDB 来了，它是一种 HTML5 技术，可以轻松保存你的图片，即使你刷新或关闭页面。

什么是 IndexedDB？

IndexedDB 是一个本地数据库，可以以键值对的形式存储数据。与 localStorage 不同，它可以存储大量数据，并支持事务处理，非常适合存储复杂数据。

如何使用 IndexedDB 存储文件

步骤 1：创建数据库

const request = indexedDB.open("myDatabase", 1);

request.onsuccess = function(event) {
  const db = event.target.result;
};

步骤 2：创建对象存储

const db = request.result;

const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });

步骤 3：存储文件

const transaction = db.transaction(["myObjectStore"], "readwrite");

const objectStore = transaction.objectStore("myObjectStore");

const file = document.querySelector("input[type=file]").files[0];

const reader = new FileReader();

reader.onload = function(event) {
  const arrayBuffer = event.target.result;

  const object = {
    id: file.name,
    data: arrayBuffer
  };

  objectStore.add(object);
};

reader.readAsArrayBuffer(file);

步骤 4：读取文件

const transaction = db.transaction(["myObjectStore"], "readonly");

const objectStore = transaction.objectStore("myObjectStore");

const request = objectStore.get(file.name);

request.onsuccess = function(event) {
  const object = event.target.result;

  const blob = new Blob([object.data], { type: file.type });

  const url = URL.createObjectURL(blob);

  const image = document.createElement("img");

  image.src = url;

  document.body.appendChild(image);
};