indexedDB的用法（增删改查，样样俱全）

最新推荐文章于 2024-06-18 08:26:10 发布

strive涛

最新推荐文章于 2024-06-18 08:26:10 发布

阅读量1.9k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_40402681/article/details/94602385

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<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>

strive涛

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
indexedDB的用法（增删改查，样样俱全）

<html> <head></head> <body> <script> var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;...
复制链接

扫一扫