indexDB使用基础小結(结合dexie)

1.使用indexDB

a.打开数据库和创建数据库

            var db;
            var request = window.indexedDB.open('db', 1)
            request.onerror = function (event) {
                console.log('数据库打开报错');
            };
            request.onsuccess = function (event) {
                db = request.result;
                console.log('数据库打开成功');
            };
            //新建數據庫
            request.onupgradeneeded = function (event) {
                db = event.target.result;
                var objectStore;
                if (!db.objectStoreNames.contains('person')) {
                    objectStore = db.createObjectStore('person', { keyPath: 'id' });
                }
            }

b.增删改查indexDB数据(方法名自己定义)

        //新增数据
        function add() {
            console.log(db);
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .add({ id: 1, name: '小李', age: 24, email: 'xiaoli@example.com' });

            request.onsuccess = function (event) {
                console.log('数据写入成功');
            };

            request.onerror = function (event) {
                console.log('数据写入失败');
            }
        }
          //刪除數據
        function remove() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);

            request.onsuccess = function (event) {
                console.log('数据删除成功');
            };
        }
        //更新數據(修改)
        function update() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });

            request.onsuccess = function (event) {
                console.log('数据更新成功');
            };

            request.onerror = function (event) {
                console.log('数据更新失败');
            }
        }
        //读取数据(查找)
        function read() {
            var request = db.transaction(['person']).objectStore('person').get(1);
            request.onerror = function (event) {
                console.log('事务失败');
            };
            request.onsuccess = function (event) {
                if (request.result) {
                    console.log('Name: ' + request.result.name);
                    console.log('Age: ' + request.result.age);
                    console.log('Email: ' + request.result.email);
                } else {
                    console.log('未获得数据记录');
                }
            };
        }
        //遍歷數據(查找)
        function readAll() {
            var objectStore = db.transaction('person').objectStore('person');

            objectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;

                if (cursor) {
                    console.log('Id: ' + cursor.key);
                    console.log('Name: ' + cursor.value.name);
                    console.log('Age: ' + cursor.value.age);
                    console.log('Email: ' + cursor.value.email);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了！');
                }
            };
        }
      

2.indexDB结合dexie.js使用

a.引入dexie.js

<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>

b.创建数据库

            var db = new Dexie("mydb");
            db.version(1).stores({
                person: "++id,name,age"
            });
            console.log(db);

c.增删改查(方法名自己定义)

        //新增
        function Add() {
            db.person.add({name: '張三', age: 20 })
        }
        //删除
        function Del() {
            db.person.delete(2)
        }
        //修改
        function Put() {
            db.person.put({ id: 2, name: '李四', age: 20 })
        }
        //查找
        function Get() {
            db.person.get(1)
        }
        //条件查找
        async function Where() {
            await db.person.where('age').above(30).toArray()
        }

d.关闭数据库

//關閉
        function close() {
            db.close()
        }