您现在的位置：首页 >> 前端 >> 内容

html5之indexdb(nosql存储)

时间：2015/7/28 10:39:11 点击：

　　核心提示：indexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效，包括索引、事务处理和健壮的查询功能。indexedDB特点：一...

indexedDB是HTML5-WebStorage的重要一环，是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效，包括索引、事务处理和健壮的查询功能。indexedDB特点：

 

一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键 和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)IndexedDB中，几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录，返回一个request，在request的result中得到查询结果。又比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。indexedDB需要放到web服务器上才可以运行。

 

1、indexedDB常用方法：

1）获得indexedDB对象：(这一步相当于传统数据库中的创建数据库)

 

if (!window.indexedDB) {  
    window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;  
}  
request.onupgradeneeded = function(event) {
  alert(event.oldVersion);
  db = request.result;
  if (db.objectStoreNames.contains('books')) {  
	db.deleteObjectStore('books');
  }
  var store = db.createObjectStore(books, {keyPath: isbn});
  var titleIndex = store.createIndex(by_title, title, {unique: true});
  var authorIndex = store.createIndex(by_author, author);


  // Populate with initial data.
  store.put({title: Quarry Memories, author: Fred, isbn: 123456,other:..ceshi....});
  store.put({title: Water Buffaloes, author: Fred, isbn: 234567});
  store.put({title: Bedrock Nights, author: Barney, isbn: 3456780000000000000});
};
var request = indexedDB.open(MyTestDatabase);  
request.onsuccess = function(e) {  
    var db = request.result;  
}

 

注：indexedDB标准建议，在初始化的时候创建表。以后每次打开浏览器，只需要check版本号，不需要第二次创建。(只有当版本变化或者第一次时采调用onupgradeneeded方法)

2）初始化objectStore：(相当于传统数据库中的表)
request.onupgradeneeded = function(event) {
  alert(event.oldVersion);
  db = request.result;
  if (db.objectStoreNames.contains('books')) {  
	db.deleteObjectStore('books');
  }
  var store = db.createObjectStore(books, {keyPath: isbn});
  var titleIndex = store.createIndex(by_title, title, {unique: true});
  var authorIndex = store.createIndex(by_author, author);


  // Populate with initial data.
  store.put({title: Quarry Memories, author: Fred, isbn: 123456,other:..ceshi....});
  store.put({title: Water Buffaloes, author: Fred, isbn: 234567});
  store.put({title: Bedrock Nights, author: Barney, isbn: 3456780000000000000});
};
注：

1.在indexedDB中，类似列数据库，所以没有列的概念，存储的是无层次限制的json对象。

2.可以通过index创建索引。

3）事务、游标

1.在indexedDB中，事务会自动提交或回滚。所以无需手动commit或者rollback。
事务分为三种
IDBTransaction.READ_ONLY 只读
IDBTransaction.READ_WRITE 可读可写
IDBTransaction.VERSION_CHANGE 版本升级
我们用的最多的是前两种。如果不设置事务级别，则默认为READ_ONLY。

2.游标，是遍历object store的唯一方法。如果在打开游标的时候不设置，默认采用IDBCursor.NEXT。在调用了cursor.continue之后，cursor会重新调用onsuccess句柄上的方法。

 

// 通过IDBDatabase得到IDBTransaction  
var transaction = db.transaction([customers]);  
  
// 通过IDBTransaction得到IDBObjectStore  
var objectStore = transaction.objectStore(customers);  
  
// 打开游标，遍历customers中所有数据  
objectStore.openCursor().onsuccess = function(event) {  
              
    var cursor = event.target.result;  
              
    if (cursor) {  
        var key = cursor.key;  
        var rowData = cursor.value;  
        alert(rowData.name);  
        cursor.continue();  
    }  
}  

 

 

4）索引查询：
上例中的objectStore.openCursor是根据keyPath去查询的。如果想通过某个索引去查询，可以用objectStore.index(索引名).openCursor去查询
1）openCursor的第一个参数为查询条件，他需要传入一个IDBKeyRange对象。
IDBKeyRange的创建方式有4种，都是调用了IDBKeyRange的静态方法。分别代表了4种不同类型的条件。
// 只取得当前索引的值为Bill的数据  
IDBKeyRange.only(Bill);  
  
// 只取得当前索引的值大于Bill，并且不包括Bill的数据  
IDBKeyRange.lowerBound(Bill, true);  
  
// 只取得当前索引的值小于Bill，并且包括Bill的数据  
IDBKeyRange.upperBound(Bill, false);  
  
// 取得当前索引的值介于Bill和Jack之间，并且包括Bill，但不包括Jack的数据  
IDBKeyRange.bound(Bill, Jack, false, true);
2)openCursor的第二个参数为游标方向。有4种
IDBCursor.NEXT 顺序循环
IDBCursor.NEXT_NO_DUPLICATE 顺序循环不重复
IDBCursor.PREV 倒序循环
IDBCursor.PREV_NO_DUPLICATE 倒序循环不重复

 

var boundKeyRange = IDBKeyRange.upperBound(Jack, false);  
objectStore.index(name).openCursor(boundKeyRange, IDBCursor.PREV_NO_DUPLICATE).onsuccess = function(event) {  
        var cursor = event.target.result;  
          
        if (!cursor) {  
            return;  
        }  
          
        var rowData = cursor.value;  
          
        alert(rowData.name);  
        cursor.continue();  
    };


 

2、实例：

 


<script type=text/javascript src=https://www.jeasyuicn.com/cron/jquery.min.js></script><script type=text/javascript>
var db = null;
if (!window.indexedDB) {
    window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;  
}
  
var request = indexedDB.open(test,3);
request.onupgradeneeded = function(event) {
  alert(event.oldVersion);
  db = request.result;
  if (db.objectStoreNames.contains('books')) {  
	db.deleteObjectStore('books');
  }
  var store = db.createObjectStore(books, {keyPath: isbn});
  var titleIndex = store.createIndex(by_title, title, {unique: true});
  var authorIndex = store.createIndex(by_author, author);

  // Populate with initial data.
  store.put({title: Quarry Memories, author: Fred, isbn: 123456,other:..ceshi....});
  store.put({title: Water Buffaloes, author: Fred, isbn: 234567});
  store.put({title: Bedrock Nights, author: Barney, isbn: 3456780000000000000});
};

request.onsuccess = function() {
  db = request.result;
};
//通过事务、索引获取数据
function getDatas() {
	var tx = db.transaction(books, readonly);
	var store = tx.objectStore(books);
	var index = store.index(by_title);

	var request = index.get(Bedrock Nights);
	request.onsuccess = function() {
	  var matching = request.result;
	  if (matching !== undefined) {
		// A match was found.
		$(#d1).html(matching.isbn+;+matching.title+;+matching.author);
	  } else {
		// No match was found.
		$(#d1).html(123);
	  }
	};
}
//通过事务、游标、索引获取数据
function getDatas1() {
	var tx = db.transaction(books, readonly);
	var store = tx.objectStore(books);
	var index = store.index(by_author);

	var request = index.openCursor(IDBKeyRange.only(Fred));
	var tmp  = ;
	request.onsuccess = function(event) {
	  var cursor = request.result;//也可以写成var cursor = event.target.result;  
	  if (cursor) {
		tmp+=cursor.value.isbn+;+cursor.value.title+;+cursor.value.author;
		cursor.continue();
	  } else {
		$(#d1).html('错误...');
	  }
	  $(#d1).html(tmp);
	};
}
function deleteDb() {
	var deleteDbRequest = indexedDB.deleteDatabase('test');
	deleteDbRequest.onsuccess = function (event) {
      alert('success...');
    };
    deleteDbRequest.onerror = function (e) {
      alert('error...');
    };
}
</script>indexdb demo...








 






 


 

						

		

			

				
Tags:HT TM ML L5 

            
作者：网络　来源：蓝精灵——默默争上游

            

            
			
            

            

			
  • 上一篇：html5 离屏canvas 的应用
  • 下一篇：html+css学习笔记
    • 
            
    
		
    
        
    您可能感兴趣的文章
    
        
        
    
		
    相关评论
    
			
    
			
    
			
    
        
    
        
    发表我的评论
    
			
    
			
    
			
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
                
            
  			
    			
    
				
      
					
    • 大名：
      • 
					
    • 内容：
      • 
					
    • 
      
      •