浏览器内置数据库indexedDB增删改查示例

一、先简单了解下什么是IndexedDB?

IndexedDB是一种底层API,用于客户端存储大量结构化数据,并提供了索引、事务、查询和游标等数据库特性。与localStorage和sessionStorage不同,IndexedDB是一个真正的数据库,它允许我们在用户的浏览器中存储几乎无限制的数据量,并通过复杂的查询来访问这些数据。

常用方法介绍:

1. open()

功能:打开或创建一个数据库。

参数:

  • name:数据库的名称(字符串)。
  • version:数据库的版本号(整数)。如果省略,打开已有数据库时默认为当前版本;新建数据库时默认为1。

返回值:返回一个IDBOpenDBRequest对象,用于处理打开数据库的结果。

事件:onsuccess、onerror、onupgradeneeded。

2、createObjectStore()

功能:在数据库的版本升级事件中创建新的对象仓库(Object Store)。

参数:

  • name:对象仓库的名称(字符串)。
  • options:一个对象,包含对象仓库的配置选项,如keyPath(主键路径)和autoIncrement(是否自动生成主键)。
    返回值:无。

3、createIndex()

功能:在对象仓库中创建索引。

参数:

  • indexName:索引的名称(字符串)。
  • keyPath:索引基于的键路径(字符串或数组)。
  • options:一个对象,包含索引的配置选项,如unique(是否唯一)。
    返回值:无。

4、transaction()

功能:开始一个事务,用于执行对数据库的读写操作。

参数:

  • storeNames:一个包含对象仓库名称的数组或单个对象仓库名称,指定事务将访问哪些对象仓库。
  • mode:事务的模式(字符串),如readonly(只读)、readwrite(读写)。
    返回值:返回一个IDBTransaction对象,用于管理事务。

5、objectStore()

功能:通过事务对象获取指定的对象仓库。

参数:对象仓库的名称(字符串)。

返回值:返回一个IDBObjectStore对象,用于对对象仓库进行操作。

add() 、put() 、delete() 、get() 、clear()

这些方法都是在IDBObjectStore对象上调用的,用于向对象仓库中添加、更新、删除、获取和清空数据。

具体可查看https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

二、示例

javascript 复制代码
<template>
  <div>
    <el-button @click="onOperation('add')" type="primary">增</el-button>
    <el-button @click="onOperation('delete')" type="primary">删</el-button>
    <el-button @click="onOperation('update')" type="primary">改</el-button>
    <el-button @click="onOperation('query')" type="primary">查by主键</el-button>
    <el-button @click="onOperation('queryIndex')" type="primary"
      >查by索引</el-button
    >
    <el-row>
      <el-col :span="8">
        <div>书名:<el-input v-model="formData.title" /></div>
        <div>作者:<el-input v-model="formData.author" /></div>
        <div>需要修改/查询的数据主键(id):<el-input v-model="mainKey" /></div>
        <div>需要查询的数据索引(title):<el-input v-model="mainTitle" /></div>
      </el-col>
      <el-col :span="8"> 查询结果:<br />{{ detailData }} </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: '',
        author: ''
      },
      mainKey: null,
      mainTitle: '',
      detailData: null
    }
  },
  created() {
    this.initState()
  },
  methods: {
    initState() {
      // 打开(或创建)一个名为 "myDatabase" 的数据库
      const request = indexedDB.open('myDatabase', 1)

      // onupgradeneeded 是 IndexedDB API 中的一个事件,它在数据库的版本发生变化时被触发。这通常发生在你打开数据库时指定了一个比当前数据库版本更高的版本号
      request.onupgradeneeded = function(event) {
        const db = event.target.result

        // 创建一个名为 "books" 的对象存储
        const objectStore = db.createObjectStore('books', {
          keyPath: 'id', // 主键
          autoIncrement: true // 主键(keyPath)是否自动增长
        })

        // 创建索引createIndex(参数一:索引的名称(字符串);参数二:索引基于的键路径(字符串或数组);参数三:一个对象,包含索引的配置选项,如unique(是否唯一))
        objectStore.createIndex('title', 'title', { unique: false })
      }

      request.onerror = event => {
        console.error('数据库打开失败:' + event.target.errorCode)
      }
    },
    onOperation(type) {
      const _this = this
      const request = indexedDB.open('myDatabase', 1)
      request.onsuccess = function(event) {
        const db = event.target.result
        // 创建一个只读事务,涉及到 "books" 对象存储
        const transaction = db.transaction(['books'], 'readwrite')
        // 用于获取事务中的一个对象存储
        const objectStore = transaction.objectStore('books')

        // 增
        if (type === 'add') {
          objectStore.add(_this.formData)
        }
        // 删
        if (type === 'delete') {
          objectStore.delete(Number(_this.mainKey))
        }
        // 改
        if (type === 'update') {
          objectStore.put({
            id: Number(_this.mainKey),
            ..._this.formData
          })
        }
        let getRequest
        // 查-主键
        if (type === 'query') {
          getRequest = objectStore.get(Number(_this.mainKey))
          // 查-索引
        } else if (type === 'queryIndex') {
          // 获取 "title" 索引
          const index = objectStore.index('title')
          getRequest = index.getAll(_this.mainTitle)
        } else {
          // 查-all
          getRequest = objectStore.getAll()
        }
        getRequest.onsuccess = function(event) {
          _this.detailData = event.target.result
          console.log('查询结果:', event.target.result)
        }
      }
    }
  }
}
</script>
相关推荐
胚芽鞘6817 分钟前
关于java项目中maven的理解
java·数据库·maven
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
sun0077003 小时前
mysql索引底层原理
数据库·mysql
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app