前面说过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(even