indexedDB的用法(增删改查,样样俱全)

<html>
    <head></head>
    <body>
        <script>
            var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
            if(!indexedDB)
            {
                console.log("你的浏览器不支持IndexedDB");
            }
            var open = indexedDB.open('db1',1)
            open.onupgradeneeded = function(e){
                console.log('触发了 upgradeneeded 事件')
                var db = e.target.result
                if (!db.objectStoreNames.contains('Person')) {
                    console.log('创建新的对象存储')
                    var person = db.createObjectStore('Person',{keyPath: 'id',autoIncrement: true})
                    person.createIndex('id', 'id', {unique: true})
                    person.createIndex('name', 'name', {unique: false})
                }
            }
            open.onsuccess = function(e){
                console.log('触发了 success 事件')
                var db = e.target.result
                // 实例化数据库操作对象
                var operatDB = new OperatDB(db)
                //  新增数据
                /* var people = {
                    name: 'yangtao1',
                    id: 1234567890,
                    email: 'konata9@konata9.com',
                    phone: 12345678901
                }
                operatDB.add(people)*/
                // 主键获取
                //operatDB.getPrimaryKey(1234567890)

                // 索引获取
                //operatDB.getIndex('id',12345678)

                // 更新
                /*var people = {
                    name: 'Konata9',
                    id: 12345678,
                    email: 'konata9@konata9.com',
                    phone: 111000111
                }
                operatDB.update(people)*/

                // 删除
                operatDB.delete(12345678)
            }
            open.onerror = function(e){
                console.log('触发了 error 事件')
                console.log(e)
            }

            function OperatDB(db) {
                this.db = db
            }
            OperatDB.prototype.add = function (people) {
                var trans = this.db.transaction(['Person'], 'readwrite')
                // 获取具体的对象存储
                var Person = trans.objectStore('Person')
                
                var result = Person.add(people)
                // 写入数据的事件监听
                result.onsuccess = function(e){
                    console.log(e)
                    console.log('数据顺利插入')
                }
                result.onerror = function(e){
                    console.log(e)
                }
            }
            // 通过主键获取数据
            OperatDB.prototype.getPrimaryKey = function (id) {
                // 这里开启事务,传入的是一个数组,也就是说我们可以对多个对象存储进行操作
                var trans = this.db.transaction(['Person'], 'readonly')
                // 获取具体的对象存储
                var Person = trans.objectStore('Person')
                var result = Person.get(id)
                // 写入数据的事件监听
                result.onsuccess = function(e){
                    console.log(e.target.result)
                }
                result.onerror = function(e){
                    console.log(e)
                }
            }
            // 通过索引获取数据
            OperatDB.prototype.getIndex = function (currentIndex,person_name) {
                // 这里开启事务,传入的是一个数组,也就是说我们可以对多个对象存储进行操作
                var trans = this.db.transaction(['Person'], 'readonly')
                // 获取具体的对象存储
                var Person = trans.objectStore('Person')
                // 打开索引
                var new_currentIndex = Person.index(currentIndex)
                var result = new_currentIndex.get(person_name)
                // 写入数据的事件监听
                result.onsuccess = function(e){
                    console.log(e.target.result)
                }
                result.onerror = function(e){
                    console.log(e)
                }
            }

            // 更新
            OperatDB.prototype.update = function (people) {
                // 这里开启事务,传入的是一个数组,也就是说我们可以对多个对象存储进行操作
                var trans = this.db.transaction(['Person'], 'readwrite')
                // 获取具体的对象存储
                var Person = trans.objectStore('Person')
                
                var result = Person.put(people)
                // 写入数据的事件监听
                result.onsuccess = function(e){
                    console.log(e)
                    console.log('数据更新成功')
                }
                result.onerror = function(e){
                    console.log(e)
                }
            }

            // 删除(传入主键)
            OperatDB.prototype.delete = function (id) {
                var trans = this.db.transaction(['Person'], 'readwrite')
                // 获取具体的对象存储
                var Person = trans.objectStore('Person')
                var result = Person.delete(id)
                // 写入数据的事件监听
                result.onsuccess = function(e){
                    console.log(e)
                    console.log('数据删除成功')
                }
                result.onerror = function(e){
                    console.log(e)
                }
            }
        </script>
    </body>
</html>
上一篇:浏览器本地存储——sessionStorage 与 localStorage


下一篇:Web 应用优化 - 充分利用缓存