HTML5 indexedDb 数据库

indexedDb 数据库  

上一节中，我们知道了，HMTL5中内置了两种本地数据库，一种是通过SQL语言来访问的文件型SQL数据库被称为“SQLLite，另一种是是被称为indexedDB 的数据库，我们今天说一下“indexedDB”数据库。

indexedDB 数据库是一种存储在客户端本地的NoSQL数据库，目前chrome 11 以上 Firefox4 以上版本 ie10以有版本支持。

存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。

1.连接数据库

首先，你需要知道你的浏览器是否支持IndexedDB。请使用最新版的谷歌浏览器或火狐浏览器。低版本的IE是不行的。

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if(!window.indexedDB)
{
    console.log("你的浏览器不支持IndexedDB");
}

调用indexedDB.open方法就可以创建或者打开一个indexedDB。看一个完整的处理

 

function openDB (name) {
            var request=window.indexedDB.open(name);
            request.onerror=function(e){
                console.log('OPen Error!');
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
        }

        var myDB={
            name:'test',
            version:1,
            db:null
        };
        openDB(myDB.name);

 

代码中定义了一个myDB对象，在创建indexedDB request的成功毁掉函数中，把request获取的DB对象赋值给了myDB的db属性，这样就可以使用myDB.db来访问创建的indexedDB了。

version版本更新

我们注意到除了onerror和onsuccess，IDBOpenDBRequest还有一个类似回调函数句柄——onupgradeneeded。这个句柄在我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用。

indexedDB.open()方法还有第二个可选参数，数据库版本号，数据库创建的时候默认版本号为1，当我们传入的版本号和数据库当前版本号不一致的时候onupgradeneeded就会被调用，当然我们不能试图打开比当前数据库版本低的version，否则调用的就是onerror了，修改一下刚才例子

 

function openDB (name,version) {
            var version=version || 1;
            var request=window.indexedDB.open(name,version);
            request.onerror=function(e){
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
            request.onupgradeneeded=function(e){
                console.log('DB version changed to '+version);
            };
        }

        var myDB={
            name:'test',
            version:3,
            db:null
        };
        openDB(myDB.name,myDB.version);

 

由于刚才已经创建了版本为1的数据库，打开版本为3的时候，会在控制台输出：DB version changed to 3

关闭与删除数据库

关闭数据库可以直接调用数据库对象的close方法

function closeDB(db){
            db.close();
        }

删除数据库使用indexedDB对象的deleteDatabase方法

function deleteDB(name){
            indexedDB.deleteDatabase(name);
        }

简单调用

 

var myDB={
            name:'test',
            version:3,
            db:null
        };
        openDB(myDB.name,myDB.version);
        setTimeout(function(){
            closeDB(myDB.db);
            deleteDB(myDB.name);
        },500);

 

由于异步API愿意，不能保证能够在closeDB方法调用前获取db对象（实际上获取db对象也比执行一条语句慢得多），所以用了setTimeout延迟了一下。当然我们注意到每个indexedDB实例都有onclose回调函数句柄，用以数据库关闭的时候处理，有兴趣同学可以试试，原理很简单，不演示了。

object store对象仓库

有了数据库后我们自然希望创建一个表用来存储数据，但indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。

我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异

键类型	存储数据
不使用	任意值，但是没添加一条数据的时候需要指定键参数
keyPath	Javascript对象，对象必须有一属性作为键值
keyGenerator	任意值
都使用	Javascript对象，如果对象中有keyPath指定的属性则不生成新的键值，如果没有自动生成递增键值，填充keyPath指定属性

事务

在对新数据库做任何事情之前，需要开始一个事务。事务中需要指定该事务跨越哪些object store。

事务具有三种模式

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

var transaction=db.transaction(['students','taecher']);  //打开一个事务，使用students 和teacher object store
var objectStore=transaction.objectStore('students'); //获取students object store

给object store添加数据

调用数据库实例的createObjectStore方法可以创建object store，方法有两个参数：store name和键类型。调用store的add方法添加数据。有了上面知识，我们可以向object store内添加数据了

keyPath

因为对新数据的操作都需要在transaction中进行，而transaction又要求指定object store，所以我们只能在创建数据库的时候初始化object store以供后面使用，这正是onupgradeneeded的一个重要作用，修改一下之前代码

 

function openDB (name,version) {
            var version=version || 1;
            var request=window.indexedDB.open(name,version);
            request.onerror=function(e){
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
            request.onupgradeneeded=function(e){
                var db=e.target.result;
                if(!db.objectStoreNames.contains('students')){
                    db.createObjectStore('students',{keyPath:"id"});
                }
                console.log('DB version changed to '+version);
            };
        }

 

这样在创建数据库的时候我们就为其添加了一个名为students的object store，准备一些数据以供添加

 

var students=[{
            id:1001,
            name:"Byron",
            age:24
        },{
            id:1002,
            name:"Frank",
            age:30
        },{
            id:1003,
            name:"Aaron",
            age:26
        }];

 

 

function addData(db,storeName){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName); 

            for(var i=0;i<students.length;i++){
                store.add(students[i]);
            }
        }

openDB(myDB.name,myDB.version);
        setTimeout(function(){
            addData(myDB.db,'students');
        },1000);

 

这样我们就在students object store里添加了三条记录，以id为键，在chrome控制台看看效果

注：IndexedDB 对createObjectStore的使用有明确的限制。因为使用createObjectStore，就是对数据库结构进行修改，所以必须得升级版本号，同时createObjectStore操作要在onupgradeneeded的事件中执行

keyGenerate

 

function openDB (name,version) {
            var version=version || 1;
            var request=window.indexedDB.open(name,version);
            request.onerror=function(e){
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
            request.onupgradeneeded=function(e){
                var db=e.target.result;
                if(!db.objectStoreNames.contains('students')){
                    db.createObjectStore('students',{autoIncrement: true});
                }
                console.log('DB version changed to '+version);
            };
        }

 

剩下的两种方式有兴趣同学可以自己摸索一下了

查找数据

可以调用object store的get方法通过键获取数据，以使用keyPath做键为例

 

function getDataByKey(db,storeName,value){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName);
            var request=store.get(value);
            request.onsuccess=function(e){
                var student=e.target.result;
                console.log(student.name);
            };
}

 

更新数据

可以调用object store的put方法更新数据，会自动替换键值相同的记录，达到更新目的，没有相同的则添加，以使用keyPath做键为例

 

function updateDataByKey(db,storeName,value){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName);
            var request=store.get(value);
            request.onsuccess=function(e){
                var student=e.target.result;
                student.age=35;
                store.put(student);
            };
}

 

删除数据及object store

调用object store的delete方法根据键值删除记录

function deleteDataByKey(db,storeName,value){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName);
            store.delete(value);
        }

调用object store的clear方法可以清空object store

function clearObjectStore(db,storeName){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName);
            store.clear();
}

调用数据库实例的deleteObjectStore方法可以删除一个object store，这个就得在onupgradeneeded里面调用了

if(db.objectStoreNames.contains('students')){
                    db.deleteObjectStore('students');
}