indexedDB复合搜索、范围搜索和分页查询

当indexedDB数据库数据量大时，可以使用以下方案简化查询，提高效率和解决渲染卡顿问题

建立复合索引

当需要通过多个条件进行数据查询时，可以建立复合索引进行数据查询

requeset.onupgradeneeded = function (event) {
    db = event.target.result
    console.log('数据库升级')
    let objectStorePerson
    if (!db.objectStoreNames.contains('person')) {
        objectStorePerson = db.createObjectStore('person', { keyPath: 'id' });
    } else {
        objectStorePerson = event.target.transaction.objectStore('person')
    }
    if (!objectStorePerson.indexNames.contains('classNameAddGradeName')) {
        objectStorePerson.createIndex('classNameAddGradeName', ['className','gradeName'], {unique: false})
    }
}

建立复合索引只需要把createIndex方法的第二个参数改为keyPath的序列数组。在上述代码中，在 person 对象仓库新建一个 className 和 gradeName 的复合索引，索引名为'classNameAddGradeName'

let data = [];
let requeset = db.transaction(['person'], 'readonly')
    .objectStore('person')
    .index('classNameAddGradeName')
    .openCursor(['1班', '五年级'])
requeset.onsuccess = function (event) {
    let res = event.target.result;
    if (res) {
        data.push(res.value);
        res.continue();
    } else {
        console.log('读取数据成功：', data);
    }
}
requeset.onerror = function () {
    console.log('读取数据失败')
}

同样查询时的参数也需要传递属性值的序列数组，且位置需要与新建索引时的属性名数组一一对应。

范围查询

查询一定范围内的数据可以使用IDBKeyRange对象。
IDBKeyRange对象代表数据仓库（object store）里面的一组主键。根据这组主键，可以获取数据仓库或索引里面的一组记录。
IDBKeyRange 可以只包含一个值，也可以指定上限和下限。它有四个静态方法，用来指定主键的范围。

• IDBKeyRange.lowerBound()：指定下限。
• IDBKeyRange.upperBound()：指定上限。
• IDBKeyRange.bound()：同时指定上下限。
• IDBKeyRange.only()：指定只包含一个值。

Range	Code
All keys ≥ x	IDBKeyRange.lowerBound(x)
All keys > x	IDBKeyRange.lowerBound(x, true)
All keys ≤ y	IDBKeyRange.upperBound(y)
All keys < y	IDBKeyRange.upperBound(y, true)
All keys ≥ x && ≤ y	IDBKeyRange.bound(x, y)
All keys > x &&< y	IDBKeyRange.bound(x, y, true, true)
All keys > x && ≤ y	IDBKeyRange.bound(x, y, true, false)
All keys ≥ x &&< y	IDBKeyRange.bound(x, y, false, true)
The key = z	IDBKeyRange.only(z)

以下是具体的代码实例

let data = [];
let requeset = db.transaction(['person'], 'readonly')
    .objectStore('person')
    .index('age')
    .openCursor(IDBKeyRange.bound(9, 10))
requeset.onsuccess = function (event) {
    let res = event.target.result;
    if (res) {
        data.push(res.value);
        res.continue();
    } else {
        console.log('读取数据成功：', data);
    }
}
requeset.onerror = function () {
    console.log('读取数据失败')
}

以上代码获取了person对象仓库中age大于等于9，小于等于10的所有数据

复合索引和范围查询联合使用

单搜索条件为多个且某个条件为一个范围时，可以联合使用复合索引和范围查询，当索引为复合索引时，将IDBKeyRange对象方法的参数更改为属性值数组来进行检索

let data = [];
let requeset = db.transaction(['person'], 'readonly')
    .objectStore('person')
    .index('ageAndClassNameAndGradeName')
    .openCursor(IDBKeyRange.bound([11, '1班', '五年级'], [12, '1班', '五年级']))
requeset.onsuccess = function (event) {
    let res = event.target.result;
    if (res) {
        data.push(res.value);
        res.continue();
    } else {
        console.log('读取数据成功：', data);
    }
}
requeset.onerror = function () {
    console.log('读取数据失败')
}

上述代码中查询了person对象仓库中gradeName为五年级，className为1班，age在11到12之间的数据

分页查询

indexedDB中可以通过IDBCursor指针对象的advance方法移动指针来实现分页查询的功能，对于需要展示总条目的情况，可以使用 IDBObjectStore.count()方法获取数据总个数
cursor.advance(count);
该方法设置指针向前移动的次数，count参数为所移动的次数

let page = 2, pageSize = 10, data = []
let store = db.transaction(['person'], 'readonly').objectStore('person')
let requeset = store.openCursor()
let count = store.count()
let index = null
requeset.onsuccess = function (event) {
    let res = event.target.result;
    if (res) {
        if (index === pageSize - 1) {
            data.push(res.value);
            console.log('读取数据成功：', data);
            console.log('总条目', count.result);
            return
        }
        if (index === null && page !== 1) {
            console.log('读取跳过：', (page - 1) * pageSize);
            index = 0
            res.advance((page - 1) * pageSize)
        } else {
            index ++
            data.push(res.value);
            res.continue();
        }
    } else {
        console.log('读取数据成功：', data);
        console.log('总条目', count.result);
    }
}
requeset.onerror = function () {
    console.log('读取数据失败')
}