前言

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

洛可可白

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

代码获取

• Gitee - https://gitee.com/bestwishes0203

封面壁纸

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

在Vue中使用IndexedDB的实用指南

引言

IndexedDB简介

封装IndexedDB操作

// 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 示例

<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>javascript">
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 示例

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

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