如何使用indexdb

 

一、實現步驟

 

1）獲得indexedDB對象

if (!window.indexedDB) {
    window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB;      //webkit是chrome
}

 

 

2）打開數據庫   

var openDBRequest = indexedDB.open("person",3);        //第二個參數為版本
var openDBRequest = indexedDB.open("dev");

 由於事件執行的順序問題，打開數據庫open方法一定是放在window.onload = function(){} 或都其它事件函數之外

 

3）創建主鍵、索引

request.onupgradeneeded = function(event){     //數據庫版本發生變化時先調用這個函數，然后再執行onsuccess
    alert(event.oldVersion);
    database = request.result;
    if (database.objectStoreNames.contains('user')) { 
        database.deleteObjectStore('user');
      }
    var store = database.createObjectStore("user", {keyPath: "uuid", autoIncrement: true});    //此處表示將uuid作為主鍵
　　//keyPath 后面的值一定是要存在的屬性名，用於標志唯一字段，如果重復則不添加進去，可以是字符串、數值類型等 
　　//此值也是索引中的 Primary key(keyPath : "uuid")
    store.createIndex("idIndex", "id", {unique: true});   //創建索引 (此處的id改為uuid)
　　//idIndex 為索引的名稱，id 為 索引中的KeyPath，即將id屬性中的值作為索引
　　//注：如果寫成id的話（與上面的keyPath不一至，將不會創建索引，這里將不會創建索引）
    var user1 = {uuid :1001, username: "caoxiaobo", password: "123456", age: 23,other:"test"};
    var user2 = {uuid :1002, username: "adminuser", password: "123456", age: 24};
    var user3 = {uuid :1003, username: "test1user", password: "123456", age: 25}
    var req = store.put(user1);
    store.put(user2);
    store.put(user3);
    req.onsuccess = function(){
          //...
    }
}

 

索引創建規則（只能有一個unique為true）

例：

var store = database.createObjectStore(["user"], { keyPath: "uuid",  autoIncrement: true});

store.createIndex("idIndex", "uuid", { unique: true});

store.createIndex('nameIndex','username',{ unique: false});

store.createIndex('passwordIndex','password',{ unique: false});

 

 

4）刪除數據庫

var deleteRequest = indexedDB.deleteDatabase('test');
deleteRequest.onsuccess = function(){
    alert("刪除成功");
}
db.deleteObjectStore('books');        //刪除數據表

 

 

 

二、常用方法及說明

 

例如：window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB;

返回類型：IDBFactory

接口/屬性	類型	說明
IDBFactory.cmp	方法	比較兩個鍵的方法並返回一個結果，表明哪個值更大
IDBFactory.deleteDatabase	方法	請求刪除數據庫
IDBFactory.open	方法	請求打開一個數據庫的連接，返回類型：IDBOpenDBRequest

 

 

 

 

備注：不管創建新數據庫還是打開已有的數據庫，都是調用 window.indexedDB 對象的 open() 

 

 

例如：request = indexedDB.open("dev", 3);

返回類型：IDBOpenDBRequest

接口/屬性	類型	說明
IDBOpenDBRequest.onblocked	事件
IDBOpenDBRequest.onupgradeneeded	事件	會在當一個數據庫的版本比已經存在的版本還高的時候觸發
IDBOpenDBRequest.result	屬性	返回一個IDBDatabase對象
IDBOpenDBRequest.transaction	屬性	事務的方法，返回一個IDBTransaction對象

 

 

 

 

 

備注： 

1.如果該數據庫不存在，則創建，如果存在，則打開並返回一個IDBOpenDBRequest對象；

2.如果version大於oldVersion,則執行onupgradeneeded,再執行onsuccess，否則直接執行onsuccess

 

例如：database = openRequest.result;

返回類型：IDBDatabase

接口名稱	類型	說明
IDBOpenDBRequest.name	屬性（只讀）	DOMString類型，當前連接數據庫名
IDBOpenDBRequest.objectStoreNames	屬性（只讀）	DOMStringList類型，當前連接連接數據庫中所有的object store 名字列表。
IDBOpenDBRequest.version	屬性（只讀）	64-bit 整型數，當前連接數據庫的版本 。當數據第一次被創建時，這個屬性是一個空的字符串
IDBOpenDBRequest.onabort	事件	在中斷數據庫訪問時觸發
IDBOpenDBRequest.onclose	事件	在一個單獨的線程中關閉數據庫連接並立即返回
IDBOpenDBRequest.onerror	事件	當訪問數據庫失敗時觸發
IDBOpenDBRequest.onversionchange	事件	當數據庫結構發生更改時觸發

 

 

 

 

 

 

 

 

例如：transaction = database.transaction(stores, mode);

返回類型：IDBTransaction

接口/屬性		說明
IDBTransaction.db	屬性（只讀）	當前事務所屬的數據庫連接
IDBTransaction.error	屬性
IDBTransaction.mode	屬性（只讀）	使用事務模式，如readonly、readwrite等
IDBTransaction.objectStoreNames	屬性	返回一個DOMStringList類型， IDBObjectStore
IDBTransaction.onabort	事件
IDBTransaction.oncomplate	事件
IDBTransaction.onerror	事件
IDBTransaction.onversionchange	事件

 

 

 

 

 

 

 

 

事務種類

IDBTransaction.READ_ONLY       readonly     默認

IDBTransaction.READ_WRITE     readwrite

IDBTransaction.VERSION_CHANGE     版本升級

 

 

 

例如： store = transaction.ojbectStore(stores);

返回類型：IDBObjectStore 

接口/屬性	類型	說明
IDBObjectStore.autoIncrement
IDBObjectStore.indexNames	屬性	使用事務模式
IDBObjectStore.keyPath	屬性
IDBObjectStore.name	屬性
IDBObjectStore.transaction	方法	事件的事件處理器
IDBObjectStore.autoIncrement	屬性	true/false

 

 

 

 

 

 

 

例如：request = store.get(id);

返回類型：IDBRequest

接口/屬性	類型	說明
IDBRequest.error	屬性（只讀）	當前事務所屬的數據庫連接
IDBRequest.onerror
IDBRequest.onsuccess	屬性（只讀）	使用事務模式
IDBRequest.readyState		返回一個DOMStringList類型， IDBObjectStore
IDBRequest.result		事件
IDBRequest.source		事件的事件處理器
IDBRequest.transaction		事件

 

 

 

 

 

 

 

 

 

 

 

三、CRUD操作

 

指定游標范圍
openKeyCursor()                                                   等同於openCursor()
IDBKeyRange.only(value)                                   只獲取指定數據
IDBKeyRange.lowerBound(value, isOpen)     獲取最小是value的數據，第二個參數用來指示是否排除value值本身，也就是是否關閉區間
IDBKeyRange.upperBound(value, isOpen)     和上面類似，用於獲取最大值是value的數據 如果isOpen為true，即為[value, ~) IDBKeyRange.bound(value1, value2, isOpen1, isOpen2) 查詢[value1,value2) 區間內的數據 //第二個參數為游標的方向： IDBCursor.NEXT 順序循環 IDBCursor.NEXT_NO_DUPLICATE 順序循環不重復 IDBCursor.PREV 倒序循環 IDBCursor.PREV_NO_DUPLICATE 倒序循環不重復 

 

 

//查詢數據
function getData() {
    //事務的創建
    var tx = database.transaction(["user"], "readonly");    //readwrite readonly
    var store = tx.objectStore("user");
    var request = store.get(1001);
    request.onsuccess = function() {
        var user = request.result;
        //var user = event.target.result;
        console.log(JSON.stringify(user));
    };
}

//游標查詢所有
function getAllData() {
    //事務的創建
    var tx = database.transaction(["user"], "readonly");    //readwrite readonly
    var store = tx.objectStore("user");
    var openCursor = store.openCursor();
    openCursor .onsuccess = function() {
        var cursor= request.result;
        //var cursor = event.target.result;
        if(cursor){
               console.log(JSON.stringify(cursor.value));
               cursor.continue();
        } 
    };
}

//游標+索引查詢
function getDataByIndexAndCursor() {
    var tx = database.transaction(["user"], "readonly");    //readwrite readonly
    var store = tx.objectStore("user");
    var index = store.index("nameIndex");
    var request = index.openCursor(IDBKeyRange.lowerBound("123"));
    //var request = index.openCursor(IDBKeyRange.bound("a","v", false, true));    //區分大小寫 
    request.onsuccess = function() {
        var cursor = request.result;
        if (cursor) {
            console.log(JSON.stringify(cursor.value));
            cursor.continue();
        }
    }
}
//獲取記錄數
function count() {
    var tx = database.transaction(["user"], "readonly");  
    var store = tx.objectStore("user");
    var request = store.count();
    request.onsuccess = function() {
        var count = request.result;
        console.log(count);
    }
}
//按索引查詢
var findByIndex = function() {
    var mode = IDBTransaction.READ_ONLY;
    var tx = database.transaction(["user"], "readonly");
    var store = tx.objectStore(["user"]);
    var index = store.index("idIndex");
    var request = index.get(1001);
    console.log(request);
    request.onsuccess = function() {
        var data = request.result;
        console.log(JSON.stringify(data));
    }
}
//添加數據
function addData(){
    var tx = database.transaction(["user"],"readwrite");
    var store = tx.objectStore("user");
    var user4 = {id:1004, username: "caoxiaobo", password: "123456", age: 23,other:"test"};
    var user5 = {id:1005, username: "adminuser", password: "123456", age: 24};
    var user6 = {id:1006, username: "test1user", password: "123456", age: 25};
    store.put(user4);
    store.put(user5);
    store.put(user6);
}

//刪除數據
function delData(){
    var tx = database.transaction(["user"],"readwrite");
    var store = tx.objectStore("user");
    store.delete(1004);
    store.delete(1005);
    store.delete(1006);
}

//清空數據
function clearData(){
    var tx = database.transaction(["user"],"readwrite");
    var store = tx.objectStore("user");
    store.clear( );
}

//修改數據
function updata(){
    var tx = database.transaction(["user"],"readwrite");
    var store = tx.objectStore("user");
    var request = store.get(1008);
    request.onsuccess = function(event) {
        var user = event.target.result;
        user.username = "cxb1008";
        user.age = 28;
        store.put(user);
    }
}