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

2024-11-2 22:36| 发布者: 4d5a8576d| 查看: 72| 评论: 0

摘要: 目录indexDBindexDB的使用1.初始化数据库2.设置数据3.读取数据4.删除数据5. 扫除对象存储（表）存储静态资源1.将静态资源转为流2.缓存静态资源indexDB IndexedDB 是一个浏览器内建的数据库，它可以存放对象格式的数

indexDB

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

indexDB的使用

1.初始化数据库

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

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

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

[code]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 }) } } }) } [/code]

2.设置数据

[code]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('数据写入乐成------') } }) } [/code]

3.读取数据

[code]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) } }) [/code]

4.删除数据

[code]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) } }) } [/code]

5. 扫除对象存储（表）

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

存储静态资源

1.将静态资源转为流

[code]// 从 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 } [/code]

2.缓存静态资源

[code]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" > [/code]

以上就是Vue3使用indexDB缓存静态资源的示例代码的详细内容，更多关于Vue3 indexDB缓存静态资源的资料请关注脚本之家别的相关文章！

来源：https://www.jb51.net/javascript/328635dx3.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：前端数据加密方式的常用6种使用最详解下一篇：利用mockjs怎样生成随机数据

账号		自动登录	找回密码
密码			立即注册