html5 indexDB实例 -

bijian1013

浏览: 3189493 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html5 indexDB实例

博客分类：

html5

html5 indexDB

IndexedDB是用于客户端的大量的结构化数据存储和使用索引高效率搜索数据的API，它是基于W3C拟定的草案索引数据库的API。相对DOM存储的小存储数据量，IndexedDB具有大容量的数据存储功能，它分别为同步数据和异步数据提供的API，但目前只有异步数据的API在Gecko2.0 上实现。

IndexDB的特点：

1. IndexedDB存储为键值对：它可以存储一些复杂的对象，而键可以存储这些对像的属性值，并且可以使用索引对对象的属性的快速检索。

2. IndexedDB建立在交互数据库模型的基础上：任何对IndexedDB的操作都发生一个交互操作（transaction），如它提供的索引、表、游标等均与一个transaction关联，它定义了交互的生存时间与结束时抛出的事件，这样能很好的处理web程序在不同的tab窗口中实例的互操作。

3. IndexedDB的API大多是异步的：你可以向数据库发出操作的“请求”，当操作完成时会产生一个DOM事件，通过事件的类型会知道操作是否成功。

4. IndexedDB使用“请求”机制：操作对象会接收到DOM的success和failure事件，它也有相应的onsuccess和onerror的属性；对象还有readyState、result和errorCode属性来查看当前“请求”的状态，而result属性则根据不同的“请求”返回不同的结果。

5. IndexedDB 使用DOM事件机制来处理“请求”的结果：DOM事件的type属性提示操作是否成功，target属性指向发生“请求”的对象（大多数情况下是IDBRequest对象）。

6. IndexedDB工作基本模式：

a.创建一个交互操作对象

b.发送操作"请求"

c.通过监听DOM事件等待操作完成

d.处理"请求"结果

下面是使用IndexDB的实例：

<!DOCTYPE html>
<html>
<head>
<title>HTML 5 Application - IndexedDb</title>
<script type="text/javascript">
	var blockbusters={
		 title:"indexDB",
		 derector:"HTML5 function",
		 length:120
	};//假设这个object用来保存的	
	var db;
	var request;
	var store;
	function createDatabase(dbName) {
		request=indexedDB.open(dbName,3);//如果存在的话，就打开；如果不存在的话，就新建
		//打开数据库失败，onerror事件被触发
		request.onerror = function () {
	    	alert("fail to open datbase with:"+event.target.message);
		}
		//打开数据库成功，onsuccess事件被触发
	    request.onsuccess = function (event) {
			alert("success open the database!");
			// store.add(ss);
			db=event.target.result;
			var transaction = db.transaction(["blockbusters"], "readwrite");//可读可写事务方式
	        var objectStore = transaction.objectStore("blockbusters");
			objectStore.add(blockbusters);
			// var store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			//   store.createIndex("director", "director", { unique: false });
			// var transaction = db.transaction(["blockbusters"],readwirte);
	        //    store = transaction.objectStore("blockbusters");
	        //   request = store.put(video);	 
	    }
	    //在新的数据库创建或数据库版本号被更改时，onupgradeneeded事件被触发
		request.onupgradeneeded = function(event) {
			alert("version Change");
	        db = event.target.result;
			store = db.createObjectStore("blockbusters", {keyPath: "title",autoIncrement: false});
			// store.createIndex("director", "director", { unique: false });  
		}
	}	 
	function deletedatabase(dbName){
		try{
	    	indexedDB.deleteDatabase(dbName);
	   	}catch(e){
		 	alert(e.getMessage);
		}
	}	 
</script>
</head>
<body>
	<button onclick="createDatabase('Test')">Create Database</button>
	<button onclick="deletedatabase('customers')">delet Database</button>
</body>
</html>

运行效果：