广州现在算什么风险地区_网站的建设与维护_b站推广入口_小红书推广费用一般多少

前言

欢迎来到我的技术小宇宙！这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。

洛可可白

个人主页 - https://blog.csdn.net/interest_ing_/
个人专栏 - 前端技术
个人专栏 - 后端技术
个人博客 - https://bestwishes0203.github.io/blog/

代码获取

Gitee - https://gitee.com/bestwishes0203

封面壁纸

洛可可白 - https://wallpaper.seenav.cn/

在Vue中使用IndexedDB的实用指南

引言

随着前端应用的复杂度增加，对于客户端存储的需求也在不断增长。IndexedDB作为一种强大的浏览器数据库，提供了存储大量结构化数据的能力。本文将介绍如何在Vue中封装和使用IndexedDB，包括Options API和Composition API的示例。

IndexedDB简介

IndexedDB是一个在浏览器中运行的非关系型数据库，它允许网页应用存储和检索大量结构化数据。与LocalStorage相比，IndexedDB提供了更高级的数据存储和查询能力，支持事务、索引和二进制数据存储。

封装IndexedDB操作

为了简化IndexedDB的使用，我们可以封装一系列操作，如打开数据库、添加数据、获取数据、更新数据和删除数据。以下是db.js文件的封装示例：

// db.js
const DB_NAME = 'my-database';
const DB_VERSION = 1;
const STORE_NAME = 'my-store';// 打开数据库
function openDB() {return new Promise((resolve, reject) => {const request = indexedDB.open(DB_NAME, DB_VERSION);request.onerror = (event) => {reject('Database error: ' + event.target.errorCode);};request.onsuccess = (event) => {resolve(event.target.result);};request.onupgradeneeded = (event) => {const db = event.target.result;if (!db.objectStoreNames.contains(STORE_NAME)) {db.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });}};});
}// 添加数据
function addData(data) {return new Promise((resolve, reject) => {openDB().then((db) => {const transaction = db.transaction([STORE_NAME], 'readwrite');const store = transaction.objectStore(STORE_NAME);const request = store.add(data);request.onsuccess = () => {resolve(request.result);};request.onerror = () => {reject(request.error);};}).catch(reject);});
}// 获取数据
function getData(key) {return new Promise((resolve, reject) => {openDB().then((db) => {const transaction = db.transaction([STORE_NAME], 'readonly');const store = transaction.objectStore(STORE_NAME);const request = store.get(key);request.onsuccess = () => {resolve(request.result);};request.onerror = () => {reject(request.error);};}).catch(reject);});
}// 更新数据
function updateData(key, data) {return new Promise((resolve, reject) => {openDB().then((db) => {const transaction = db.transaction([STORE_NAME], 'readwrite');const store = transaction.objectStore(STORE_NAME);const request = store.put(data);request.onsuccess = () => {resolve(request.result);};request.onerror = () => {reject(request.error);};}).catch(reject);});
}// 删除数据
function deleteData(key) {return new Promise((resolve, reject) => {openDB().then((db) => {const transaction = db.transaction([STORE_NAME], 'readwrite');const store = transaction.objectStore(STORE_NAME);const request = store.delete(key);request.onsuccess = () => {resolve(request.result);};request.onerror = () => {reject(request.error);};}).catch(reject);});
}export { addData, getData, updateData, deleteData };

Options API 示例

在Vue组件中使用Options API调用utils工具：

<template><div><h1>IndexedDB Operations</h1><button @click="addItem">Add Item</button><button @click="getItem">Get Item</button><button @click="updateItem">Update Item</button><button @click="deleteItem">Delete Item</button></div>
</template><script>
import { addData, getData, updateData, deleteData } from './db';export default {data() {return {itemId: 1,itemName: 'New Item'};},methods: {addItem() {addData({ id: this.itemId, name: this.itemName }).then(() => alert('Item added')).catch((error) => alert('Error adding item: ' + error));},getItem() {getData(this.itemId).then((item) => alert(`Item retrieved: ${JSON.stringify(item)}`)).catch((error) => alert('Error retrieving item: ' + error));},updateItem() {updateData(this.itemId, { id: this.itemId, name: 'Updated Item' }).then(() => alert('Item updated')).catch((error) => alert('Error updating item: ' + error));},deleteItem() {deleteData(this.itemId).then(() => alert('Item deleted')).catch((error) => alert('Error deleting item: ' + error));}}
};
</script>

Composition API 示例

在Vue组件中使用Composition API调用utils工具：

<template><div><h1>IndexedDB Operations</h1><button @click="addItem">Add Item</button><button @click="getItem">Get Item</button><button @click="updateItem">Update Item</button><button @click="deleteItem">Delete Item</button></div>
</template><script>
import { ref } from 'vue';
import { addData, getData, updateData, deleteData } from './db';export default {setup() {const itemId = ref(1);const itemName = ref('New Item');const addItem = () => {addData({ id: itemId.value, name: itemName.value }).then(() => alert('Item added')).catch((error) => alert('Error adding item: ' + error));};const getItem = () => {getData(itemId.value).then((item) => alert(`Item retrieved: ${JSON.stringify(item)}`)).catch((error) => alert('Error retrieving item: ' + error));};const updateItem = () => {updateData(itemId.value, { id: itemId.value, name: 'Updated Item' }).then(() => alert('Item updated')).catch((error) => alert('Error updating item: ' + error));};const deleteItem = () => {deleteData(itemId.value).then(() => alert('Item deleted')).catch((error) => alert('Error deleting item: ' + error));};return {addItem,getItem,updateItem,deleteItem,itemId,itemName};}
};
</script>

这样，你就可以在Vue页面中使用封装好的IndexedDB操作了。记得将db.js文件放在项目的合适位置，并确保它被正确导入。

如果对你有帮助，点赞👍、收藏💖、关注🔔是我更新的动力！👋🌟🚀