【H5】本地数据库indexdb

2023-12-04 12:06:28

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!");
    };
}

删除数据库

//删除数据库

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!")
    }
}

创建一个存储对象

在这里我们创建了一个名称为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();

增加数据

写了一个增加数据的函数，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

https://*.com/questions/24256202/uncaught-typeerror-cannot-read-property-transaction-of-null-with-an-indexeddb

删除数据

//删除

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");

创建索引

在创建索引的时候会出现创建不成功情况，索引的创建需要在创建存储对象的时候进行创建，如果先创建了存储对象，然后通过获取到对象，再进行索引创建的时候，这样是不成功的，所以在这里我们重新创建了一个名称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);

索引查询

//根据索引查询

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");

游标

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

//游标
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");

索引和游标

利用索引和游标查询了名称叫做”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");