自学内容网 自学内容网

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
}

  1. 缓存静态资源
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"
     >


原文地址:https://blog.csdn.net/weixin_42215897/article/details/142853070

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!