html5使用indexdb的代码实例分享（图文）

黄舟

发布时间：2017-03-31 11:50:21

5572人浏览过

来源于php中文网

原创

前面说过html5对于离线应用的支持是很好的，不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件，将需要缓存的文件在其中定义，其实html5中还可以使用indexdb，又称索引数据库，该数据库可以用来存储离线对象。下面开始：

请求完成后的回调

所有的请求完成之后都会有一个回调，onsuccess 和onerror，其中：onsuccess表示请求成功时候的回调，onerror 表示请求失败时候的回调。同时还可以使用javascript中的 try/catch来捕获异常，在进一步的处理。

使用数据库

一个数据库一次只能有一个版本，初次创建改数据库的时候版本号是0，当我们需要更改已经创建好的数据库时候，就需要更改其版本号，当更改版本号的时候，会触发upgradeneeded回调，所以修改数据库或者存储对象的方法必须放到upgradeneeded方法中执行。

判断当前浏览器是否支持indexdb

if (!window.indexedDB) {
    window.alert("您的浏览器不支持indexdb");
}<!--这里indexDB是window对象的属性，类似于alert所以window可以省略-->

创建数据库

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function createDatabase(indexDbName) {
            //调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库，则会创建该数据库
            var openRequest = indexedDB.open(indexDbName);            var db;
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result;//创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
            };
            openRequest.onupgradeneeded = function (evt) {//更改数据库，或者存储对象时候在这里处理

            };
        }    </script></head><body>
    <a href="javascript:createDatabase('firstdb')">createDatabase</a></body></html>

上面这段代码可以创建一个数据库到客户端。
这里写图片描述

删除数据库

通过调用 deleteDatabase 方法，并且传入需要删除的数据库名称来删除现有数据库。

立即学习“前端免费学习笔记（深入）”；

function deleteDatabase(indexDbName) {
    var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
    deleteDbRequest.onsuccess = function (event) {
        console.log("detete database success");
    };
    deleteDbRequest.onerror = function (e) {
        console.log("Database error: " + e.target.errorCode);
    };
}

存储数据

objectstore

在indexdb中没有表的概念，而是使用objectstore来存储对象的，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异

事物

在更新数据库内容或者插入新的数据时候，需要首先开启到事物，并且需要制定当前事物操作了那些objectstore。

事务具有三种模式

只读：read，不能修改数据库数据，可以并发执行
读写：readwrite，可以进行读写操作
版本变更：verionchange

因为对新数据的操作都需要在transaction中进行，而transaction又要求指定object store，所以我们只能在创建数据库的时候初始化object store以供后面使用。

指定keyid添加数据

指定keyid，可以理解为指定一个主键

//添加数据
        function insertAnObj(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,1);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",'readwrite'); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains('userinfo')){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    db.createObjectStore('userinfo',{keyPath:"id"});
                }

            }
}

这里写图片描述

使用autoIncrement添加数据

指定autoIncrement，可以理解为指定了一个主键自动增长。

//指定主键自动增长
        function insertAutoInc(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,2);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",'readwrite'); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains('userinfo')){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    db.createObjectStore('userinfo',{autoIncrement: true});
                }
            }
}

这里写图片描述

查找数据

根据id查找数据

之前我们已经添加过了定义key为autoincreament类型方式的数据，现在就可以根据id来查找单条数据了。

function findDbdata(indexDbName,value) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",'readwrite');                
                var objectStore = transaction.objectStore("userinfo");                
                //var cursor = objectStore.openCursor();
                var request = objectStore.get(Number(1));//查找i=1的对象，这里使用Number将1转换成数值类型
                request.onsuccess = function(e) {
                    var res = e.target.result; //查找成功时候返回的结果对象
                    console.dir(res);                    
                    if (res) {                        
                    for (var field in res) { //遍历每一个对象属性
                            console.log(field+":"+res[field]);                            
                            // alert(res[field]);
                        };
                    };
                }
            };
            openRequest.onupgradeneeded = function (event) {//更改数据库，或者存储对象时候在这里处理

            };
}

这里写图片描述

方科网络ERP图文店

方科网络ERP图文店II版为仿代码站独立研发的网络版ERP销售程序。本本版本为方科网络ERP图文店版的简化版，去除了部分不同用的功能，使得系统更加精炼实用。考虑到图文店的特殊情况，本系统并未制作出入库功能，而是将销售作为重头，使用本系统，可以有效解决大型图文店员工多，换班数量多，订单混杂不清的情况。下单、取件、结算分别记录操作人员，真正做到订单全程跟踪！无限用户级别，不同的用户级别可以设置不同的价

下载

查找所有数据

function findAllDbdata(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",'readonly');                
                var objectStore = transaction.objectStore("userinfo");                
                var cursor = objectStore.openCursor();
                cursor.onsuccess = function(e) { 
                    var res = e.target.result; 
                    if(res) { 
                        console.log("Key", res.key); 
                        var request = objectStore.get(Number(res.key));//根据查找出来的id，再次逐个查找
                        request.onsuccess = function(e) {
                            var res = e.target.result; //查找成功时候返回的结果对象
                            //console.dir(res);
                            if (res) {                                
                            for (var field in res) { //遍历每一个对象属性
                                    console.log(field+":"+res[field]);                      
                                    // alert(res[field]);
                                };
                            };
                        }
                        res.continue(); 
                    } 
                }   
            };
        }

这里写图片描述

根据id删除数据

删除跟引用0一样，需要创建事务，然后调用删除引用1delete来删除数据

function deleteDataById(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",'readwrite');                
                var objectStore = transaction.objectStore("userinfo");                
                var request = objectStore.delete(Number(2));//根据查找出来的id，再次逐个查找
                request.onsuccess = function(e) {
                    console.log("delete success");
                }
            }
        }

删除所有数据

通过objectstore.clear()删除所有的数据。

function deleteAllData(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",'readwrite');                
                var objectStore = transaction.objectStore("userinfo");
                objectStore.clear();
            }   
        }

创建索引

我们可以在创建object store的时候指明索引，使用object store的createIndex创建索引，方法有三个参数

索引名称
索引属性字段名
索引属性值是否唯一
这里我新创建一个数据库，并且设置基于name和age的索引：

//指定主键自动增长
        function insertAutoInc(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,2);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",'readwrite'); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains('userinfo')){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    var objectStore = db.createObjectStore('userinfo',{autoIncrement: true});
                    objectStore.createIndex('nameIndex','name',{unique:true});//这里假定名字不能重复，创建基于name的唯一索引
                    objectStore.createIndex('ageIndex','age',{unique:false});//创建基于age的索引
                }
            }
        }

这里写图片描述

利用索引引用2数据

可以利用索引快速获取数据，name的索引是唯一的没问题，但是对于age索引只会取到第一个匹配值，要想得到所有age符合条件的值就需要引用3了

 function getDataByIndex(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);        var db;
        openRequest.onerror = function(e) {//当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readwrite');            
            var objectStore = transaction.objectStore("userinfo");            
            var nameIndex = objectStore.index("nameIndex"); //获得nameIndex索引
            nameIndex.get("小李").onsuccess = function(e) { //根据name索引获得数据成功的回调
               var userinfo = e.target.result;
               console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
            }
        }
    }

这里写图片描述

游标和索引结合使用

刚才我们不仅创建了一个name的唯一索引，而且还创建了一个age的索引，如果我们根据age来获取数据，有可能会有多条，由于age不唯一，所以这个时候就需要使用游标来遍历数据。这里我先插入两条age=24的记录。
这里写图片描述

function getDataByAgeIndex(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);        var db;
        openRequest.onerror = function(e) {//当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",'readwrite');            
            var objectStore = transaction.objectStore("userinfo");            
            var nameIndex = objectStore.index("ageIndex"); //获得ageIndex索引
            var request = nameIndex.openCursor();//openCursor没有参数的时候，表示获得所有数据
            request.onsuccess = function(e) {//openCursor成功的时候回调该方法
              var cursor = e.target.result;              if (cursor) {//循环遍历cursor
                var userinfo = cursor.value;                //alert(userinfo.name);
                console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
                cursor.continue();
              };
            }
        }
    }

这里写图片描述
同时可以在opencursor的时候传入key 引用4，来限制范围。
IDBKeyRange.only(value):只获取指定数据
IDBKeyRange.lowerBound(value,isOpen)：获取最小是value的数据，第二个参数用来指示是否排除value值本身，也就是数学中的是否是开区间
IDBKeyRange.upperBound(value,isOpen)：和上面类似，用于获取最大值是value的数据
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)：表示在value1和value2之间，是否包含value1和value2

这里为了演示方便，我先删除之前的数据库，重新插入更多的数据，现在所有数据如下：
这里写图片描述
IDBKeyRange.only(value)
这里只需要在上面opencursor的时候将该限制条件传入即可，其他代码将保持不变，如下：

var request = nameIndex.openCursor(IDBKeyRange.only(Number(24)));

这里只根据age索引查询age==24的所有数据。
这里写图片描述
IDBKeyRange.lowerBound(value,isOpen)
在使用IDBKeyRange.lowerBound(28，true)来获取年龄大于28的并且包含28岁的所有数据。

var request = nameIndex.openCursor(IDBKeyRange.lowerBound(Number(28),true));

这里写图片描述

ok，今天就到这里了，希望大家喜欢。

H5页面制作适合哪些应用场景

H5页面制作如何进行测试

H5页面制作的流程是怎样的

H5页面制作能做什么

H5页面制作是开发网页吗

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载