vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 indexDB缓存静态资源

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

作者:Lval

IndexedDB 是一个浏览器内建的数据库,它可以存放对象格式的数据,默认情况下,浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量,本文给大家介绍了Vue3使用indexDB缓存静态资源,需要的朋友可以参考下

indexDB

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

indexDB的使用

1.初始化数据库

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

const request = indexedDB.open(name, version)
//name:数据库名称,version:版本号
//数据库在打开时,
//若没有这个库,则会新建,默认版本号为1;
//若有,打开时的版本号比原本保存的版本号更高,则会更新这个库,同时触发upgradeneeded事件
//数据库的版本号只会越来越高
//新建、编辑、删除一个对象存储表都会执行更新
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缓存静态资源的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文