indexedDB学习资料

<template>
  <div class="container">
      <el-button type="primary" @click="closeDB">关闭此数据库</el-button>
      <el-button type="primary" @click="deleteDB">删除此数据库</el-button>
      <el-button type="primary" @click="insertOneData">增加单条数据</el-button>
      <el-button type="primary" @click="insertMoreData">增加多条数据</el-button>
      <el-button type="primary" @click="queryData">查询数据（游标）</el-button>
      <el-button type="primary" @click="updateData">修改数据</el-button>
      <el-button type="primary" @click="deleteOneData">删除一条数据</el-button>
      <el-button type="primary" @click="queryAllData">查询某张表的所有数据</el-button>
      <el-button type="primary" @click="queryByPrimaryKey">根据主键查询某条数据</el-button>
      <el-button type="primary" @click="queryByIndex">根据索引查询某条数据</el-button>
      <el-button type="primary" @click="clearTable">清空某张表的数据</el-button>
      <el-button type="primary" @click="deleteByPrimaryKey">通过主键删除某条数据</el-button>
      <el-button type="primary" @click="updateByPrimaryKey">通过主键更改某条数据</el-button>
  </div>
</template>

<script>
/**
 * 描述
 * @date 2021-11-22
 * @des  参考：https://www.npmjs.com/package/idb-js?activeTab=dependencies
 * @安装 npm install idb-js --save
 */
import Idb from "idb-js";
import db_student_config from "../common/db_common_config";
export default {
    data() {
        return {
            student_db: null,
        };
    },
    mounted() {
        Idb(db_student_config).then(
            (student_db) => {
                this.student_db = student_db;
            },
            (err) => {
                console.log(err);
            }
        );
    },
    methods: {
        closeDB() {
            this.student_db.close_db();
        },
        deleteDB() {
            this.student_db.delete_db();
        },
        insertOneData() {
            this.student_db.insert({
                tableName: "test1",
                data: {
                    id: 3,
                    score: 100,
                    name: "小刚",
                },
                success: () => console.log("添加成功"),
            });
        },
        insertMoreData() {
            this.student_db.insert({
                tableName: "test1",
                data: [
                    {
                        id: 1,
                        score: 98,
                        name: "小明",
                    },
                    {
                        id: 2,
                        score: 99,
                        name: "小方",
                    },
                ],
                success: () => console.log("添加成功"),
            });
        },
        queryData() {
            this.student_db.query({
                tableName: "test1",
                condition: (item) => item.score == 99,
                success: (r) => {
                    console.log(r);
                },
            });
        },
        updateData() {
            this.student_db.update({
                tableName: "test1",
                condition: (item) => item.name == "小明",
                handle: (r) => {
                    r.score = 80;
                },
                success: (r) => {
                    console.log("修改成功", r);
                },
            });
        },
        deleteOneData() {
            this.student_db.delete({
                tableName: "test1",
                condition: (item) => item.name == "刚",
                success: (res) => {
                    console.log("删除成功");
                },
            });
        },
        queryAllData() {
            this.student_db.queryAll({
                tableName: "test1",
                success: (res) => {
                    console.log(res);
                },
            });
        },
        queryByPrimaryKey() {
            this.student_db.query_by_index({
                tableName: "test1",
                indexName: "name",
                target: "小明",
                success: (res) => {
                    console.log(res);
                },
            });
        },
        queryByIndex() {
            this.student_db.query_by_primaryKey({
                tableName: "test1",
                target: 1,
                success: (res) => {
                    console.log(res);
                },
            });
        },
        clearTable() {
            this.student_db.clear_table({
                tableName: "test1",
            });
        },
        deleteByPrimaryKey() {
            this.student_db.delete_by_primaryKey({
                tableName: "test1",
                target: 1,
                success: () => console.log("删除成功"),
            });
        },
        updateByPrimaryKey() {
            this.student_db.update_by_primaryKey({
                tableName: "test1",
                target: 1,
                handle: (val) => (val.score = 101),
                success: (res) => {
                    console.log(res);
                },
            });
        },
    },
};
</script>

<style scoped lang="less">
.container{
    padding: 50px;
}
.el-button {
    margin-bottom: 20px;
}
</style>

db_common_config.js

export default {
    dbName: "test-DB", // *数据库名称
    version: 1, // 数据库版本号（默认为当前时间戳）
    tables: [
        // *数据库的表，即ObjectStore
        {
            tableName: "test1", // *表名
            option: { keyPath: "id" }, // 表配置，即ObjectStore配置，此处指明主键为id
            indexs: [
                // 数据库索引（建议加上索引）
                {
                    key: "id", // *索引名
                    option: {
                        // 索引配置，此处表示该字段不允许重复
                        unique: true
                    }
                },
                {
                    key: "name"
                },
                {
                    key: "score"
                }
            ]
        },
        {
            tableName: "info", // *表名 另外一张表，同理
            option: { keyPath: "id" },
            indexs: [
                {
                    key: "id",
                    option: {
                        unique: true
                    }
                },
                {
                    key: "name"
                },
                {
                    key: "age"
                },
                {
                    key: "sex"
                }
            ]
        }
    ]
};