【前端】之IndexedDB实现增删改查，包含简单示例

浏览器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>