Vue3使用indexDB缓存静态资源的示例代码_Vue.js

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"
     >

以上就是vue3使用indexdb缓存静态资源的示例代码的详细内容，更多关于vue3 indexdb缓存静态资源的资料请关注代码网其它相关文章！