vue3使用indexDB缓存静态资源

indexDB

IndexedDB 是一个浏览器内建的数据库，它可以存放对象格式的数据,默认情况下，浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量

indexDB的使用

1.初始化数据库

注：数据库的相关操作都是异步的

const request = indexedDB.open(name, version)
name：数据库名称，version：版本号
数据库在打开时，
若没有这个库，则会新建，默认版本号为1；
若有，打开时的版本号比原本保存的版本号更高，则会更新这个库，同时触发upgradeneeded事件
数据库的版本号只会越来越高
新建、编辑、删除一个对象存储表都会执行更新

• success：打开成功，数据库准备就绪 ，request.result 中有了一个数据库对象
• error：打开失败。
• upgradeneeded：更新版本，当数据库的版本更新时触发，例如，1->2

let db = null; //数据库
async function initData () {
  return new Promise((resolve, reject) => {
  //打开数据库app，如果没有app数据库会创建一个
    const request = window.indexedDB.open('app', 1)

    request.onerror = function (event) {
      console.log('数据库打开报错')
      reject(event)
    }

    request.onsuccess = function (event) {
      console.log('数据库打开成功')
      db = event.target.result
      db.onerror = function (error) {
        console.log('error---------', error)
      }
      resolve(db)
    }
	//数据库更新
    request.onupgradeneeded = function (event) {
    //获取打开（或正在升级）的数据库对象
      db = event.target.result
      // 检查数据库中是否存在指定的对象存储（表）  
      if (!db.objectStoreNames.contains('test')) {
      // 如果不存在，则创建一个新的对象存储 （表）
      // 在对象存储中创建索引，以便能够高效地通过指定字段查询记录  
        const objectStore = db.createObjectStore('test' { keyPath: 'id', autoIncrement: true })
        // 创建一个名为 'name' 的索引，基于 'name' 字段，允许重复值 （表头name）
        objectStore.createIndex('name', 'name', { unique: false })
        // 创建一个名为 'blob' 的索引，基于 'blob' 字段，允许重复值（表头blob）
        objectStore.createIndex('blob', 'blob', { unique: false })
      }
    }
  })
}

2.设置数据

async function set (data) {
  return new Promise((resolve, reject) => {
    //启动需要访问的表，并设置读写权限(默认只有读取权限)
    const transaction = db.transaction([’test‘], 'readwrite')
    //获取指定名称的对象存储（表）
    const objectStore = transaction.objectStore()
    //添加数据
    objectStore.add(data).onsuccess = function (event) {
      resolve(event)
      console.log('数据写入成功------')
    }
  })
}

3.读取数据

async function get (name) {
  return new Promise((resolve, reject) => {
    // l连接test表，通过index方法获取一个索引（name）的引用，使用索引的get方法发起一个异步请求，以根据索引键（在这个例子中是变量name的值）检索对象
    const request = db.transaction([‘test’], 'readwrite')
      .objectStore('test').index('name').get(name)
    request.onsuccess = function (event) {
      console.log('数据seach')
      if (event.target.result) {
        console.log('数据存在')
      } else {
        console.log('数据不存在')
      }
      resolve(event.target.result)
    }

    request.onerror = function (event) {
      console.log('数据seach失败')
      reject(event)
    }
  })

4.删除数据

async function del (name) {
  return new Promise((resolve, reject) => {
 	// 获取要删除的数据的引用
    const transaction = db.transaction(['test'], 'readwrite')
    const objectStore = transaction.objectStore('test')
    const index = objectStore.index('name')
    const request = index.get(name)
	// 处理查询结果
    request.onsuccess = function (event) {
      const record = event.target.result
      if (record) {
        // 获取主键 id
        const id = record.id
        // 使用主键 id 删除记录
        const deleteRequest = objectStore.delete(id)
		// 删除成功
        deleteRequest.onsuccess = function () {
          console.log('数据删除成功------')
          resolve()
        }

        deleteRequest.onerror = function (event) {
          console.log('数据删除失败')
          reject(event)
        }
      } else {
        console.log('未找到匹配的记录')
        resolve() // 或者 reject(new Error('未找到匹配的记录'));
      }
    }

    request.onerror = function (event) {
      console.log('索引查询失败')
      reject(event)
    }
  })
}

5. 清除对象存储（表）

function clear () {
//连接对象存储
  const objectStore = db.transaction(['test'], 'readwrite').objectStore('test')
  //清除对象存储
  objectStore.clear()
}

存储静态资源

1.将静态资源转为流

// 从 IndexedDB 存储图片转成流
function changeBlob (path) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', path, true) // 使用传入的路径
    xhr.responseType = 'blob' // 设置响应类型为 blob

    xhr.onload = function () {
      if (xhr.status === 200) {
        let a = ''
        a = URL.createObjectURL(xhr.response);
        resolve(xhr.response) // 成功时返回 blob
      } else {
        reject(new Error(`Failed to load resource: ${xhr.status}`))
      }
    }

    xhr.onerror = function () {
      reject(new Error('Network error'))
    }

    xhr.send()
  })
}

//图片地址转换
const getAssetsFile = url => {
  return new URL(`../assets/images/${url}`, import.meta.url).href
}

2. 缓存静态资源

import { ref, onMounted } from 'vue'
const getAssetsFileImg = getAssetsFile('composite/animation.png')
const imgSrc = ref('')
const initDB = async () => {
//初始化数据库
  await initData()
  // 获取数据的引用
  const animation = await get('animation')
  let blob = null
  // 判断是否有数据，如果没有数据先存入数据
  if (!animation) {
   	//将静态资源转为blob
    blob = await changeBlob(getAssetsFileImg)
    //存入静态资源
    await set({ name: 'animation', blob })
  } else {
  // 如果有数据，取出数据流
    blob = animation.blob
  }
  // 将取出的数据流转为DOMString
  imgSrc.value = URL.createObjectURL(blob)
}


//  将数据绑定到页面
	<img
       style="width: 100%;height: 100%;"
       src="imgSrc"
     >