html5之indexdb(nosql存储)

落日映苍穹つ 2021-06-24 14:34 550阅读 0赞

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

1.  一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。
2.  一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键 和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)
3.  IndexedDB中，几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录，返回一个request，在request的result中得到查询结果。又比如打开数据库，返回一个request，在request的result中得到返回的数据库引用。
4.  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')) {  
    <span style="white-space:pre">	</span>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、实例：

<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://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>
    </head>
    <body>
    indexdb demo...<br/>
    <button οnclick="getDatas();">获取数据</button><br/>
    <button οnclick="getDatas1();">获取数据1</button><br/>
    <button οnclick="deleteDb();">删除数据库</button><br/>
    <div id="d1"></div>
    </body>
    </html>

http://www.w3.org/TR/IndexedDB/