indexedDB的使用

向右看齐 2021-09-01 03:21 491阅读 0赞

参考链接:  
[阮一峰解析][Link 1]  
[indexDB事件详解][indexDB]

<html>
    
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="data:;base64,=">
    
    </head>
    
    <body style="margin: 0">
    
    <script>
        const dataName = 'addDatebase';
        //1.打开并创建数据库
        window.request = window.indexedDB.open(dataName, 2);
        let db;
        //1.为数据库添加事件 - error
        request.onerror = function (event) { 
            console.log('数据库打开失败');
        };
        //1.为数据库添加事件 - success
        request.onsuccess = function (event) { 
            db = request.result;
            console.log('数据库打开成功');
            //3.为数据库添加数据
            add();
            //4.读取数据
            read();
            //5.遍历数据
            readAll();
            //6.更新数据
            update();
            //7.删除数据
            remove();
            //8.使用索引
            var transaction = db.transaction(['person'], 'readonly');
            var store = transaction.objectStore('person');
            var index = store.index('name');
            var requestName = index.get('李四');
            requestName.onsuccess = function (e) { 
                var result = e.target.result;
                if (result) { 
                    console.log(result);
                } else { 
                    console.log('noFind');
                }
            }
    
        };
        //2.数据库创建/升级事件 -- 并非多次执行
        request.onupgradeneeded = function (event) { 
            db = event.target.result;
            console.log(db);
            //判断表是否存在
            if (!db.objectStoreNames.contains('person')) { 
                //新建表
                let objectStore = db.createObjectStore('person', { keyPath: 'id'});
                //新建索引
                objectStore.createIndex('name', 'name', { unique: false});
                objectStore.createIndex('email', 'email', { unique: false});
            }
        };
    
        //3.新增数据
        function add() { 
            //事务的监听
            var transaction = db.transaction(['person'], 'readwrite');
            let request = transaction.objectStore('person');
            request.add({ id: 4, name: '张4', age: 26, email: 'zhangsan@example.com'});
            request.add({ id: 2, name: '张2', age: 26, email: 'zhangsan@example.com'});
            request.add({ id: 5, name: '张5', age: 26, email: 'zhangsan@example.com'});
            //事务成功的回调
            transaction.onsuccess = function (event) { 
                console.log('数据写入成功');
            };
            //事务失败的回调
            transaction.onerror = function (event) { 
                console.log('数据写入失败');
            }
        }
    
        //4.读取数据
        function read() { 
            var transaction = db.transaction(['person'], 'readonly');
            var objectStore = transaction.objectStore('person');
            //读取全部数据
            //var request = objectStore.getAll();
            //读取某条数据
            var request = objectStore.get(5);
            request.onerror = function (event) { 
                console.log('事务失败');
            };
    
            request.onsuccess = function (event) { 
                if (request.result) { 
                    console.log(request.result);
                } else { 
                    console.log('未获得数据记录');
                }
            };
        }
    
        //5.遍历数据
        function readAll() { 
            var transaction = db.transaction('person');
            console.log(transaction);
            var objectStore = db.transaction('person').objectStore('person');
            //获取指针对象
            let cursorRequest =  objectStore.openCursor();
            //指针成功回调
            cursorRequest .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('没有更多数据了！');
                }
            };
        }
    
        //6.更新数据
        function update() { 
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({  id:6, name: '李6', age: 35, email: 'lisi@example.com' });
    
            request.onsuccess = function (event) { 
                console.log('数据更新成功');
            };
    
            request.onerror = function (event) { 
                console.log('数据更新失败');
            }
        }
    
        //7.删除数据
        function remove() { 
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);
    
            request.onsuccess = function (event) { 
                console.log('数据删除成功');
            };
        }
    
    
    
    
    </script>
    </body>
    </html>

[Link 1]: http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
[indexDB]: https://wangdoc.com/javascript/bom/indexeddb.html#idbrequest-%E5%AF%B9%E8%B1%A1