前言

关于indexedDB的基础知识，可以查阅 Indexed Database API (W3C) s Using_IndexedDB (MDN) 和 使用IndexedDB (中文).

关于indexedDB的索引，我仔细翻看了W3C API才弄明白是怎么回事，在上面另外2个链接的教程中，都没有介绍索引的使用。

索引，就是以数据的快速查询为目的。

本文展示如何在indexedDB中创建和使用索引来优化数据查询。网上搜索到的indexedDB入门教程中，都没有介绍索引的使用，或是只带过了一下怎么创建索引，没提可以用来干什么。我在这里给出一个简洁完整的例子，示范一下indexedDB索引的使用。

索引需求场景示例

假设现在有一组如下的数据：

id   姓  姓名

1    张    张三

2    张    张四

3    张    张五

4    张    张六

5    王    王五

6    王    王六

其中包含4个姓张，2个姓王。

如何快速方便的查询出所有姓张的记录呢？

针对需求示例使用索引

如果不用索引，代码上就要查询出全部记录，然后对每个记录进行判断过滤。

如果用索引，就能直接按指定参数查处某姓的全部记录。

创建索引的代码片段示例：

 

store.createIndex("ix_familyName", "familyName", {unique: false});

插入测试数据的代码片段示例： 

store.put({familyName: "张", name: "张三"});
store.put({familyName: "张", name: "张四"});
store.put({familyName: "张", name: "张五"});
store.put({familyName: "张", name: "张六"});
store.put({familyName: "王", name: "王五"});
store.put({familyName: "王", name: "王六"});

查询所有姓张的记录的代码片段示例： 

var keyRange = IDBKeyRange.only("张");
var req = store.index("ix_familyName").openCursor(keyRange);

这样得到的结果中，将不会包含其他姓的记录。

 

使用索引的完整demo代码

[可运行的完整的demo看这里]

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>IndexedDB's index usage demo</title>
</head>

<body>
<h1>indexedDB中索引的使用demo</h1>
<pre>
姓:<input type="text" id="tx1" value="张">名:<input type="text" id="tx2"><button id="btnAdd">add</button>
result:
<textarea id="taResult" rows="10" cols="90"></textarea>
<button id="btnRead">read</button>
<button id="btnDelDB">deleteDatabase</button>
</pre>

<script>
function $$(id){return document.getElementById(id);}

var dbName = 'testDB1', storeName = 'testStore1', dbVersion = 1;

$$('btnAdd').onclick = add;
$$('btnRead').onclick = read;
$$('btnDelDB').onclick = function (){
    indexedDB.deleteDatabase(dbName);
};

function read(){
    openDB(function (db){
        var transaction = db.transaction(storeName,"readonly");
        transaction.oncomplete = function(event) {
            console.log("transaction oncomplete");
        };
        var store = transaction.objectStore(storeName);
        //使用索引查询所有姓张的记录
        var keyRange = IDBKeyRange.only("张");
        var req = store.index("ix_familyName").openCursor(keyRange, "next");
        var records = [];
        $$('taResult').value = '';
        req.onsuccess = function(event) {
            var cursor = event.target.result;
            if (!cursor) {
                //打印查询结果集
                $$('taResult').value = records.join('\n');
                return;
            }
            records.push(cursor.primaryKey + '    ' + cursor.key + '    ' + cursor.value.familyName + '    ' + cursor.value.name);
            cursor.continue();
        };
    });
}

function add(){
    openDB(function (db){
        var transaction = db.transaction(storeName,"readwrite");
        transaction.oncomplete = read;
        var store = transaction.objectStore(storeName);
        var req = store.put({familyName: $$('tx1').value, name: $$('tx2').value});
        req.onsuccess = function(event) {
            read();
        };
    });
}

function openDB(callback){
    if(openDB.db){
        callback(openDB.db);
        return;
    }
    var openRequest = indexedDB.open(dbName, dbVersion);
    openRequest.onupgradeneeded = function (e) {
        console.log('openRequest.onupgradeneeded');
        var db = e.target.result;
        if(!db.objectStoreNames.contains(storeName)) {
            var store = db.createObjectStore(storeName, {keyPath:"id", autoIncrement: true});
            //创建索引
            store.createIndex("ix_familyName", "familyName", {unique: false});
            //插入初始化测试数据
            store.put({familyName: "张", name: "张三"});
            store.put({familyName: "张", name: "张四"});
            store.put({familyName: "张", name: "张五"});
            store.put({familyName: "张", name: "张六"});
            store.put({familyName: "王", name: "王五"});
            store.put({familyName: "王", name: "王六"});
        }
    };
    openRequest.onsuccess = function(e) {
        console.log('openRequest.onsuccess');
        if(callback){
            openDB.db = e.target.result;
            callback(e.target.result);
        }
    };
}

</script>

</body>
</html>