indexedDB可以理解成我们前端的数据库，它是浏览器自带的一个本地数据库API，可以存储大量结构化的数据，如果工作遇到localStorage存不了的数据或者首页加载需要大量数据的情况，可以使用indexedDB解决。indexedDB支持多事务（可以建立多张表），能够根据索引、主键等多重查询、修改、删除等功能，下面就是我总结的简单例子，如果想需要使用可以通过它来了解，开发使用 idb插件来提高效率。
indexDB.js 自己总结的方法库
export default class IndexDB{
constructor(name,version){
this.db = null
// 初始话创建
this.createIndexDB(name,version)
}
/**
* 创建indexDB数据库
* @param {*} name
* @param {*} version
*/
createIndexDB(name="store",version=1){
const request = indexedDB.open(name, version);
// 数据库成功回调
request.onsuccess = (event)=> {
this.db = event.target.result; // 数据库对象
console.log(this.db)
console.log("-----------数据库打开成功");
};
// 数据库打开失败的回调
request.onerror = (event)=> {
console.log("-----------数据库打开报错");
};
// 数据库有更新时候的回调
request.onupgradeneeded = (event)=> {
// 数据库创建或升级的时候会触发
console.log("-----------onupgradeneeded");
this.db = event.target.result;
// 创建表 可以创建多个表 这里的表可以作为参数 或者写单独方法写，不过要更新表需要跟新数据库版本
if(!this.db.objectStoreNames.contains('student')) this.createTable(this.db,"student",["name","age","chinese","mathematics"])
if(!this.db.objectStoreNames.contains('sate')) this.createTable(this.db,"sate",["sate1","sate2","sate3","sate4"])
};
}
/**
* 创建数据仓库（表）
* @param {*} db 数据库实体
* @param {*} tabName 表名
* @param {*} tabKeys 表键
*/
createTable(db,tabName,tabKeys){
// 注册表 id为唯一索引
let objectStore = db.createObjectStore(tabName,
{
keyPath: 'id',
// autoIncrement: true, // id 自动递增 如果没有开启自动自增 在add的时候 需要添加id add(data,id) 第二个参数
}
);
//字段创建索引
tabKeys.map(val=>{
objectStore.createIndex(val, val, { unique: false });
})
}
/**
* 在表里添加数据 如果没有此表 会创建
* @param {*} tableName 表名
* @param {*} data 存储数据
*/
add(tableName,data){
// 开始一个事务 可以理解在一个表里添加数据 storeName就是表名
const request = this.db.transaction([tableName], "readwrite")
.objectStore(tableName)
.add(data);
request.onsuccess = (event)=> {
console.log("-----------数据写入成功");
console.log(event.target.result)
};
request.onerror = (event)=> {
console.log("-----------数据写入失败");
};
}
/**
* 通过key获取 表中的数据
* @param {*} tableName
* @param {*} key
* @returns
*/
getData(tableName,key){
return new Promise((resolve, reject) => {
let objectStore = this.db.transaction([tableName])
.objectStore(tableName)
let request = null
if(key=="all"){
request = objectStore.getAll()
}else {
request = objectStore.get(key)
}
request.onerror = (event) =>{
console.log("事务失败");
};
request.onsuccess = (event)=>{
console.log("主键查询结果: ", request.result);
resolve(request.result);
};
});
}
/**
* 更新表中的数据
* @param {*} tableName 表名
* @param {*} data 跟新的数据
*/
putData(tableName,data){
const request = this.db.transaction([tableName], "readwrite")
.objectStore(tableName)
.put(data);
request.onerror = (event) =>{
console.log("更新失败");
};
request.onsuccess = (event)=>{
console.log("更新成功: ", event.result);
};
}
/**
* 删除
* @param {*} tableName 表明
* @param {*} key id 或者 主键 如果为ALL 那么删除表下所有
*/
delData(tableName,key){
const objectStore = this.db.transaction([tableName], "readwrite")
.objectStore(tableName)
const request = null
if(key=="all" || key=="ALL"){
request = objectStore.clear()
}else{
request = objectStore.delete(key)
}
request.onerror = (event) =>{
console.log("删除失败");
};
request.onsuccess = (event)=>{
console.log("删除成功: ", request.result);
};
}
}页面使用
<template>
<div class="indexdb">
<el-button type="primary" @click="createIndexDB('dong')">创建数据库</el-button>
<br /> <br />
<el-form :inline="true" :model="formData" >
<el-form-item label="名称">
<el-input v-model="formData.name" placeholder="Approved by" />
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="formData.age" placeholder="Approved by" />
</el-form-item>
<el-form-item label="语文成绩">
<el-input v-model="formData.chinese" placeholder="Approved by" />
</el-form-item>
<el-form-item label="数学成绩">
<el-input v-model="formData.mathematics" placeholder="Approved by" />
</el-form-item>
<el-form-item >
<el-button type="primary" @click="add">添加</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" :model="sateData" >
<el-form-item label="参数1">
<el-input v-model="sateData.sate1" placeholder="Approved by" />
</el-form-item>
<el-form-item label="参数2">
<el-input v-model="sateData.sate2" placeholder="Approved by" />
</el-form-item>
<el-form-item label="参数3">
<el-input v-model="sateData.sate3" placeholder="Approved by" />
</el-form-item>
<el-form-item label="参数4">
<el-input v-model="sateData.sate4" placeholder="Approved by" />
</el-form-item>
<el-form-item >
<el-button type="primary" @click="add2">Query</el-button>
</el-form-item>
</el-form>
<br /> <br />
<el-button type="primary" @click="getData()">查询</el-button>
<el-button type="primary" @click="getData('all')">查询</el-button>
<el-input v-model="secharId" placeholder="Approved by" />
<div>{{ JSON.stringify(secharValue) }}</div>
<el-button type="primary" @click="putData()">跟新</el-button>
<el-input v-model="setupValue" placeholder="更新内容" />
<el-button type="primary" @click="deleteData('student1751449536896')">删除</el-button>
<el-button type="primary" @click="deleteData('all')">清空</el-button>
</div>
</template>
<script setup>
import IndexDb from "./indexDB.js"
import {ref, reactive, onMounted} from "vue"
let formData = reactive({
id:1,
name:"",
age:"",
chinese:"",
mathematics:""
})
let sateData = reactive({
id:"",
sate1:"",
sate2:"",
sate3:"",
sate4:""
})
let db = new IndexDb("dong",1)
// 添加数据
const add = ()=>{
formData.id = "student"+Date.now()
db.add("student", JSON.parse(JSON.stringify(formData)))
// db.add({name:addValue1.value,value:123})
}
const add2 = ()=>{
sateData.id = "sate"+Date.now()
db.add("sate",JSON.parse(JSON.stringify(sateData)))
// db.add({name:addValue1.value,value:123})
}
let secharId = ref("student1751449536896")
let secharValue = ref("")
const getData = (str)=>{
db.getData("student",str|| secharId.value).then(res=>{
secharValue.value = res
})
}
// 更新数据
let setupValue = ref("")
const putData = ()=>{
db.putData("student",{
id:"student1751871019274",
age:"34",
chinese:"34",
mathematics:"34",
name: setupValue.value,
aa:"dsf"
})
}
// 删除数据
const deleteData = (str)=>{
db.delData("student", str)
}
</script>
<style lang="less">
.indexdb{
background: #666666
}
</style>
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
