浏览器IndexedDB对象数据库简单使用
数据库配置
// 数据库名
let dbName = "file-system"
// 数据库版本
let dbVersion = 1
// 集合名
let storeName = 'files'
// 数据库对象
let db = ''
创建数据库
const init = () => {
console.log("初始化")
if (!window.indexedDB) {
window.alert('浏览器不支持IndexDB!')
return
}
let request = indexedDB.open(dbName, dbVersion)
//打开数据库失败
request.onerror = function(event) {
console.log(event.target.errorCode)
}
//打开数据库成功
request.onsuccess = function(event) {
console.log("打开数据库成功",event)
db = event.target.result
}
// 数据库升级
request.onupgradeneeded = function(event) {
db = event.target.result
// 创建数据集合
const store = db.createObjectStore(storeName,{ autoIncrement: true , keyPath: "id" })
// 创建索引
store.createIndex("id", "id", { unique: false });
store.createIndex("name", "name", { unique: false });
store.createIndex("path", "path", { unique: false });
}
}
添加一条数据
const file = {
name: '1.txt' ,
data: '' ,
craterDate: '2022-02-02 11:11:11' ,
path: '/',
type: 'file'
}
const add = () => {
console.log("添加")
// 打开事务
let transaction = db.transaction(storeName, 'readwrite')
// 搜索数据库表
let store = transaction.objectStore(storeName)
// 操作
let request = store.put(file)
request.onsuccess = function() {
console.log('添加成功')
}
request.onerror = function(event) {
console.log('添加失败',event)
}
}
更新一条数据(补充)
操作和添加一样,就是加上ID,覆盖数据。
const update = (file) => {
console.log("修改",file.id)
if(!file.id) return
// 打开事务
let transaction = db.transaction(storeName, 'readwrite')
// 搜索数据库表
let store = transaction.objectStore(storeName)
// 操作 必须为原生对象
const data = toRaw(file)
let request = store.put(data)
request.onsuccess = function() {
console.log('添加成功')
}
request.onerror = function(event) {
console.log('添加失败',event)
}
}
获取一条数据
const get = () => {
console.log("查询")
// 获取事务
let transaction = db.transaction(storeName, 'readwrite')
// 获取集合
let store = transaction.objectStore(storeName)
// 获取id=2
let request = store.get(2) // store.getAll() //key ? store.get(key) : store.getAll()
request.onsuccess = function () {
console.log(request.result)
}
}
删除一条数据
const del = () => {
console.log("删除")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let request = store.delete(1)
request.onsuccess = function() {
console.log('删除成功')
}
}
根据索引获取一条数据
const index = () => {
console.log("索引")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let index = store.index('name');
// 查询一个符合索引的
const request = index.get('1.txt')
request.onsuccess = function () {
console.log(request.result)
}
}
根据索引获取N条数据
const indexAll = () => {
console.log("索引")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let index = store.index('name');
// 查询符合索引的 X个 不填为全部
const request = index.getAll('1.txt',55)
request.onsuccess = function () {
console.log(request.result)
}
}
清空数据集
const clear = () => {
console.log("清楚")
let transaction = db.transaction(storeName, 'readwrite')
// 清除整个集合
let store = transaction.objectStore(storeName)
let request = store.clear()
request.onsuccess = function(){
console.log('清除成功')
}
}
整体界面
<template>
<div>
<button @click="init">初始化</button>
<button @click="add">添加</button>
<button @click="get">获取</button>
<button @click="del">删除</button>
<button @click="clear">清空</button>
<button @click="index">获取一条索引记录</button>
<button @click="indexAll">获取一定数量索引记录</button>
</div>
</template>
<script setup>
// 数据库名
let dbName = "file-system"
// 数据库版本
let dbVersion = 1
// 集合名
let storeName = 'files'
// 数据库对象
let db = ''
const file = {
name: '1.txt' ,
data: '' ,
craterDate: '2022-02-02 11:11:11' ,
path: '/',
type: 'file'
}
const init = () => {
console.log("初始化")
if (!window.indexedDB) {
window.alert('浏览器不支持IndexDB!')
return
}
let request = indexedDB.open(dbName, dbVersion)
//打开数据库失败
request.onerror = function(event) {
console.log(event.target.errorCode)
}
//打开数据库成功
request.onsuccess = function(event) {
console.log("打开数据库成功",event)
db = event.target.result
}
// 数据库升级
request.onupgradeneeded = function(event) {
db = event.target.result
// 创建数据集合
const store = db.createObjectStore(storeName,{ autoIncrement: true , keyPath: "id" })
// 创建索引
store.createIndex("id", "id", { unique: false });
store.createIndex("name", "name", { unique: false });
store.createIndex("path", "path", { unique: false });
}
}
const add = () => {
console.log("添加")
// 打开事务
let transaction = db.transaction(storeName, 'readwrite')
// 搜索数据库表
let store = transaction.objectStore(storeName)
// 操作
let request = store.put(file)
request.onsuccess = function() {
console.log('添加成功')
}
request.onerror = function(event) {
console.log('添加失败',event)
}
}
const get = () => {
console.log("查询")
// 获取事务
let transaction = db.transaction(storeName, 'readwrite')
// 获取集合
let store = transaction.objectStore(storeName)
// 获取id=2
let request = store.get(2) // store.getAll() //key ? store.get(key) : store.getAll()
request.onsuccess = function () {
console.log(request.result)
}
}
const del = () => {
console.log("删除")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let request = store.delete(1)
request.onsuccess = function() {
console.log('删除成功')
}
}
const clear = () => {
console.log("清楚")
let transaction = db.transaction(storeName, 'readwrite')
// 清除整个集合
let store = transaction.objectStore(storeName)
let request = store.clear()
request.onsuccess = function(){
console.log('清除成功')
}
}
const index = () => {
console.log("索引")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let index = store.index('name');
// 查询一个符合索引的
const request = index.get('1.txt')
request.onsuccess = function () {
console.log(request.result)
}
}
const indexAll = () => {
console.log("索引")
let transaction = db.transaction(storeName, 'readwrite')
let store = transaction.objectStore(storeName)
let index = store.index('name');
// 查询符合索引的 X个 不填为全部
const request = index.getAll('1.txt',55)
request.onsuccess = function () {
console.log(request.result)
}
}
</script>