html5 web IndexedDB使用详解

来源：互联网发布：unity3d怎么打包资源编辑：程序博客网时间：2024/05/22 00:11

IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库;一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。

我们一起来了解一下IndexedDB；
当前，IndexedDB的规范尚未最终定稿，不同的浏览器厂商还是使用浏览器前缀实现IndexedDB API。基于Gecko内核的浏览器使用moz前缀，基于WebKit内核的浏览器使用webkit前缀。
如果还希望使用window.indexedDB来判断浏览器是否支持IndexedDB数据库，则可以做下面的处理：

window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB;  if(window.indexedDB){    alert("您的浏览器支持IndexedDB数据库。");  } else{   alert("您的浏览器不支持IndexedDB数据库。");  }

window.indexedDB对象只有一个open方法，用于打开指定的数据库，语法如下：
request对象 = window.indexedDB.open(数据库名, 数据库版本号)

//1、打开或创建数据库request=window.indexedDB.open('testDB','2.0');//参数为：数据库名和版本号；数据库存在，则打开它；否则创建。

request对象用于处理用户对数据库的操作请求。可以通过它定义操作成功和失败的处理函数。
通过request.onsuccess可以指定操作成功的处理函数，方法如下：
（注：request.result是执行指定操作的结果，例如，执行打开数据库的操作后，通过request.result可以获得打开数据库的实例。通过数据库实例可以访问数据库。）

//2、指定操作成功的处理函数(可以获得对象存储空间信息)request.onsuccess=function(event){    alert('打开成功！');    mydb=request.result;    //var len = mydb.objectStoreNames.length;                 //对象存储空间名的个数    //var  name=mydb.objectStoreNames[i];                     //对象存储空间名    /*******方法调用********************/    get(mydb);};

通过request.onerror可以指定操作失败的处理函数，方法如下：

//3、指定操作失败的处理函数request.onerror=function(event){    alert("打开失败,错误号：" + event.target.errorCode);};

通过request.onupgradeneeded可以执行改变数据库结构的操作函数（包括创建对象存储空间），方法如下：

//4、onupgradeneeded事件在下列情况下被触发：数据库第一次被打开时；打开数据库时指定的版本号高于当前被持久化的数据库版本号。(可通过修改版本号触发该事件)request.onupgradeneeded = function(event) {    mydb=request.result;//获得数据库实例对象    if(!mydb.objectStoreNames.contains("students")) {                   //判断对象存储空间名称是否已经存在        var objectStore = mydb.createObjectStore("students", {keyPath: "id"});//创建students对象存储空间;指定keyPath选项为id（即主键为id）        //对象存储空间students的列email上创建一个唯一索引email,可以创建多个索引。        objectStore.createIndex("email",                                //索引名                                "email",                                //创建索引的列（即keyPath,索引属性字段名）                                { unique: true });                      //索引选项(索引属性值是否唯一:true or false)    }}

以下是操作方法的编写：

插入数据：

function insert(mydb){    var data = {        "id": "110",        "name": "李明",        "age": "35",        "email": "liming5@email.com"    };    //使用事务    var transaction = mydb.transaction('students',                        //事务操作的对象存储空间名                                    'readwrite');                         //事务模式:'readwrite'可读写模式;READ_ONLY只读模式;VERSION_CHANGE版本升级模式;    //2.1、当事务中的所有操作请求都被处理完成时触发    transaction.oncomplete = function(event) {};    //2.2、当事务中出现错误时触发，默认的处理方式为回滚事务；    transaction.onerror = function(event) {};    //2.3、当事务被终止时触发    transaction.onabort = function(event){};    //2.4、从事务中获得相关的对象存储空间对象    var objStore = transaction.objectStore('students');    //向students存储空间加入一个student对象，获得request对象用于处理用户对数据库的操作请求(同样拥有onerror，onupgradeneeded，onsuccess事件)    var request = objStore.add(data);    request.onsuccess = function(e) {        alert("成功插入数据，id=" + e.target.result);    };}

查询数据：

function get(mydb){      var transaction = mydb.transaction('students','readwrite');      transaction.oncomplete = function(event) {};      transaction.onerror = function(event) {};      transaction.onabort = function(event){};      var objStore = transaction.objectStore('students');      var request = objStore.get("110");                 //按照id查询      request.onsuccess=function(e){          alert(e.target.result.name +  e.target.result.age + e.target.result.email);      }  }

更新数据：

function update(mydb){     var transaction = mydb.transaction('students','readwrite');     transaction.oncomplete = function(event) {};     transaction.onerror = function(event) {};     transaction.onabort = function(event){};     var objStore = transaction.objectStore('students');     var request = objStore.get("110");     request.onsuccess=function(e){         var student=e.target.result;         student.name='wwww1';         objStore.put(student);     } }

删除数据：

function remove(mydb){    var transaction = mydb.transaction('students','readwrite');    transaction.oncomplete = function(event) {};    transaction.onerror = function(event) {};    transaction.onabort = function(event){};    var objStore = transaction.objectStore('students');    var request = objStore.delete("110");    request.onsuccess = function(e) {        alert("成功删除数据");    };}

利用索引查询：

function byIndexGet(mydb){    var transaction = mydb.transaction('students','readwrite');    transaction.oncomplete = function(event) {};    transaction.onerror = function(event) {};    transaction.onabort = function(event){};    var objStore = transaction.objectStore('students');    var index = objStore.index('email');                //索引名    var request=index.get('liming1@email.com');         //通过索引值获取数据    request.onsuccess=function(e){        var student=e.target.result;        alert(student.name+"：索引查询");    }}

游标遍历所有：

function byCursorGet(mydb){    var transaction = mydb.transaction('students','readwrite');    transaction.oncomplete = function(event) {};    transaction.onerror = function(event) {};    transaction.onabort = function(event){};    var objStore = transaction.objectStore('students');    var request=objStore.openCursor();//打开游标    request.onsuccess = function(e){        var cursor = e.target.result;        if(cursor){            alert(cursor.value.name);            cursor.continue();        }else {            alert('遍历完成');        }    }}

通过范围和排序条件，游标遍历符合条件的数据：
说明：

/** * 范围： *（1）匹配等于指定键值的记录：var range = IDBKeyRange.only(指定键值) *（2）匹配小于指定键值的记录：var range = IDBKeyRange.lowerBound(指定键值, 是否不包括指定键值) *（3）匹配大于指定键值的记录：var range = IDBKeyRange.upperBound(指定键值, 是否不包括指定键值) *（4）匹配指定范围内的记录：var range = IDBKeyRange.bound(下限键值，上限键值，是否不包括下限键值，是否不包括上限键值 */  例如：// 只取得当前索引的值为110的数据  IDBKeyRange.only("110");  // 只取得当前索引的值大于110，并且不包括110的数据  IDBKeyRange.lowerBound("110", true);  // 只取得当前索引的值小于110，并且包括110的数据  IDBKeyRange.upperBound("110", false);  // 取得当前索引的值介于110和120之间，并且包括110，但不包括120的数据  IDBKeyRange.bound("110", "120", false, true);

/** * 顺序参数： * IDBCursor.NEXT，顺序循环； * IDBCursor.NEXT_NO_DUPLICATE，顺序循环且键值不重复； * IDBCursor.PREV，倒序循环； * IDBCursor.PREV _NO_DUPLICATE，倒序循环且键值不重复。 */

function byCursorGetForRangeAndSort(mydb){    var transaction = mydb.transaction('students','readwrite');    transaction.oncomplete = function(event) {};    transaction.onerror = function(event) {};    transaction.onabort = function(event){};    var objStore = transaction.objectStore('students');    var range = IDBKeyRange.bound("110", "113", false, true);   //范围    var request=objStore.openCursor(range,             //范围（可以为null或省略不写）                                    IDBCursor.NEXT);    //游标顺序循环(可以省略不写)    request.onsuccess = function(e){        var cursor1 = e.target.result;        if(cursor1){            alert(cursor1.value.name);            cursor1.continue();        }else {            alert('遍历完成');        }    }}

可以在浏览器中按F12打开开发者模式查看：

例子源码下载地址：http://download.csdn.net/detail/rdj_miss/9507158

0 0