【16】本地数据库indexdb

HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。IndexedDB支持本地存储大量对象，并使用健壮的数据访问机制检索数据。与 Web Storage 相比，IndexedDB 具有多个优势，其中包括索引、事务处理和健壮的查询功能。一个网站能够创建多个本地数据库，其中每个数据库都可以存放多个数据对象，一个对象中有存在多个数据集合，每个数据集合中有多个键值对。我们接下来一起学习一下关于IndexedDB的一些使用方法，包括数据的增删改查，以及索引和游标的使用方法。

创建数据库

首先我们创建一个名为testDB的数据库，之后我们的操作都是在这个数据库里面进行。open()可接受两个参数，一个为数据库名称，一个为数据库版本号，如果数据库不存在则创建。

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

//创建一个数据库
function createDb(){
    var res=window.indexedDB.open('testDB');
    res.onerror=function(e){
        alert("Database error:"+e.target.errorCode);
    };
    res.onsuccess=function(event){
        alert("Database Create!");
    };
}

2017-09-03_232031.png

删除数据库

//删除数据库
function deleteDataBase(){
    var deleteDb=window.indexedDB.deleteDatabase("testDB");
    deleteDb.onsuccess=function(e){
        alert("deleteDb success!");
    }
    deleteDb.onerror=function(e){
        alert("deleteDb error:"+e.target.errorCode);
    }
}

创建一个版本不同的数据库

这里有三个函数，onerror在打开或者创建数据库失败的时候执行，onsuccess在数据打开或者创建成功的时候执行，onupgradeneeded在数据库版本改变的时候执行。

//创建一个与版本号为2的数据库
function CreateVersion(){
    var res=window.indexedDB.open('testDB',2);
    res.onerror=function(e){
        alert("Database error:"+e.target.errorCode);
    };
    res.onsuccess=function(e){
        alert("Database Create!");
    };
    res.onupgradeneeded=function(e){
        alert("Database Version Changed!")
    }
}

2017-09-03_232126.png

创建一个存储对象

在这里我们创建了一个名称为students的存储对象，并且在创建的时候指定id字段作为数据存储的键值。

function createObjStore(){
    var res=indexedDB.open('testDB',3);
    res.onupgradeneeded=function(e){
        var db=e.target.result;
        if(!db.objectStoreNames.contains('students')){
            db.createObjectStore('students',{keyPath:"id"});
        }
        alert('DB version changed');
    };
}
// createDb();
// createObjStore();

2017-09-03_235053.png

增加数据

写了一个增加数据的函数，obj表示你的数据需要存储在那个存储对象中，dbname数据库名称，version数据库版本号，data要存放的数据。

function addData(obj,dbname,version,data){
    var res =indexedDB.open(dbname,version);

    res.onsuccess = function (evt) {
        var db = evt.target.result;

        //使用事务
        var store =db.transaction(obj, "readwrite").objectStore(obj);
        store.add(data);
    }
}

写到这里的时候遇到了一个错误"未捕获TypeError：无法使用indexeddb读取null的属性transaction",关于这个错误的发生，是由于不了解异步javascript,而indexedDB就是异步的，可以参考以下这篇文章。

Uncaught TypeError: Cannot read property 'transaction' of null with an indexeddb

2017-09-10_222210.png

删除数据

//删除
function deleteData(storeName){
    var req=window.indexedDB.open("testDB");
        
        req.onsuccess=function(e){
        var db=e.target.result;
        //删除id为100的学生信息
        var res=db.transaction(storeName,"readwrite").objectStore(storeName).delete("100");

        res.onsuccess=function(){
            console.log("delete success");
        }
    }
}
//deleteData("students");

更新数据

function updateData(storeName){
    var req=window.indexedDB.open("testDB");
        
        req.onsuccess=function(e){
        var db=e.target.result;
        var store=db.transaction(storeName,"readwrite").objectStore(storeName);

        //更新id为100的学生信息
        store.get("100").onsuccess=function(evt){
            var student=evt.target.result;
            student.name="newtest";
            var res=store.put(student);
            res.onsuccess=function(){
                console.log("success");
            }
        }
    }
}
//updateData("students");

2017-09-10_231151.png

创建索引

在创建索引的时候会出现创建不成功情况，索引的创建需要在创建存储对象的时候进行创建，如果先创建了存储对象，然后通过获取到对象，再进行索引创建的时候，这样是不成功的，所以在这里我们重新创建了一个名称teachers的存储对象。在这里创建了三个索引'nameIndex','idIndex','ageIndex'，其中将idIndex的属性设置唯一。

//创建索引
function createIndex(){
    var req=window.indexedDB.open('testDB',7);

    req.onsuccess=function(e){
        console.log("success");
    }

    req.onupgradeneeded=function(e){
        var db=e.target.result;
        var store=db.createObjectStore("teachers",{keyPath:"id"});
        //创建索引
        store.createIndex('nameIndex','name',{unique:false});
        store.createIndex('idIndex','id',{unique:true});
        store.createIndex("ageIndex","age",{unique:false});
    }   
}

//createIndex();

//var data={"id":"0","name":"teacher0","age":"20"};
//addData("teachers","testDB",7,data);

2017-09-10_222210.png

索引查询

//根据索引查询
function findByIndex(obj,db){
    var req=window.indexedDB.open("testDB");
    req.onsuccess=function(e){
        var db=e.target.result;
        var store=db.transaction(obj).objectStore(obj);
        var index=store.index("nameIndex");
                //查询名字为“teacher0”的老师信息
        index.get("teacher0").onsuccess=function(e){
            var teacher=e.target.result;
            console.log(teacher);
        }
    }
}

//findByIndex("teachers","testDB");

2017-09-10_224012.png

游标

在这里我们利用游标来遍历数据库中存放的所有数据。

//游标
function findByCursor(stoeName){
    var req=window.indexedDB.open("testDB");
        
        req.onsuccess=function(e){
        var db=e.target.result;
        var store=db.transaction(stoeName).objectStore(stoeName);

        //打开游标
        var res=store.openCursor();
        res.onsuccess=function(evt){
            var cursor=evt.target.result;
            if(cursor){
                console.log(cursor.key,cursor.value);
                cursor.continue();
            }
        }
    }
}

// var data={"id":"1","name":"teacher1","age":"21"};
// addData("teachers","testDB",7,data);
// findByCursor("teachers");

2017-09-10_224854.png

索引和游标

利用索引和游标查询了名称叫做”teacher1“的所有老师信息。

//索引和游标的结合
function findByIndexAndCursor(storeName){
    var req=window.indexedDB.open("testDB");
        
        req.onsuccess=function(e){
        var db=e.target.result;
        var store=db.transaction(storeName).objectStore(storeName);

        var index=store.index("nameIndex");
        //打开游标
        var res=index.openCursor(IDBKeyRange.only('teacher1'));
        res.onsuccess=function(evt){
            var cursor=evt.target.result;
            if(cursor){
                console.log(cursor.key,cursor.value);
                cursor.continue();
            }
        }
    }
}

// var data={"id":"2","name":"teacher1","age":"23"};
// addData("teachers","testDB",7,data);

// findByIndexAndCursor("teachers");

2017-09-10_230237.png

参考文档：
HTML5本地存储——IndexedDB
使用 HTML5 IndexedDB API
Uncaught TypeError: Cannot read property 'transaction' of null with an indexeddb
点击查看完整代码